Javascript 替换旧内容d3

我正在创建一个

div

容器，然后用

svg

var someContainer = d3.select("#abc")
        .append("div")
        .classed("svg-container", true)
        .append("svg")
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox","0 0 400 100")
        .classed("svg-content-responsive", true) 
        .selectAll("circle")
        .data(someScale.range());

然后我将我的数据附加到它

someContainer.remove();

someContainer.enter()
        .append("circle")
        .attr("x", function (d, i) { 
            return i * 2;
        })
        .attr("y", 5)
        .attr("height", 15)
        ....;

但是，每当我更新

svg

的内容，即添加新的圆圈时，就会创建一个全新的

div容器

和

svg容器

。这就使得旧数据在视觉上停留在原来的位置，而在底部（也就是说，再往下100像素）就是新数据。它基本上是一个视觉副本，但有了新的数据。。。每当我整理我的数据时，一个新的coy会被替换在旧的coy下，留下n个图形

下面是设置相对容器样式的

css

，它确保在窗口大小更改时缩放。资料来源：*/

---

你知道我做错了什么吗？

如果你只需要删除所有的旧圆圈，你可以按如下方式操作：

someContainer.selectAll("circle").remove()

然后通过数据->输入->追加序列添加新的圆

 someContainer.selectAll("circle")
        .data(new_circle_data)
        .enter()
        .append("circle")
        .attr("x", function (d, i) { 
            return i * 2;
        })
        .attr("y", 5)
        .attr("height", 15)
        ....;

如果您只想删除一些现有圆并保留其他圆，则可以使用，您需要执行以下操作：

var circleUpdate = someContainer.selectAll("circle")
   .data(new_circle_data)

circleUpdate.enter().append("circle")
    .attr("x", function (d, i) { 
            return i * 2;
        })
    .attr("y", 5)
    .attr("height", 15)
    ....;

circleUpdate.exit().remove()

---

问题是每次数据更新时，都会创建一个新的

div

var someContainer = d3.select("#abc")
    .append("div")
    .classed("svg-container", true)
    ...

为了更新数据，每次数据更改时都需要更换

div

，而不是创建新的

div

。 这可以通过添加这一行来实现

d3.select(".svg-container").remove();

---

在

var someContainer=d3上方。选择…

否，这不起作用。这些东西仍然被复制。我认为问题在于每次创建一个新的div。。。当我使用element Inspector时，每次更新数据时都会看到一个新的div容器。初始化绘图时只创建一次SVG。当您与绘图交互以更改它时，调用更新函数。这个更新函数只能包含我提供的代码块，它应该足以更新这些圆。

d3.select(".svg-container").remove();