Question

我正在创建一个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-container和svg-container。这让我看到旧数据在视觉上保持原位并且在底部（意味着，100px进一步向下）有新数据。它基本上是一个可视化的副本，但是有了新的数据...每当我更新我的数据时，一个新的coy会被旧的替换掉，留下我的n个图形。

这是css，用于设置相对容器的样式，并确保在窗口大小更改时进行缩放。资料来源：Resize svg when window is resized in d3.js * /

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 50%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}

.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

任何想法我做错了什么？

Answer 1

如果您只需删除所有旧圈子，可按以下步骤删除：

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

然后按数据添加新圈子 - ＆gt;输入 - ＆gt;追加序列。

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

如果您只想删除某些现有圈子并保留其他圈子，则可以使用general update pattern.您需要执行以下操作：

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()

Answer 2

问题在于，每次更新数据时，都会创建一个新的div。

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

为了更新数据，每次数据更改时都需要替换div而不是创建新的div。这可以通过添加此行

来完成

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

在var someContainer = d3.select...

之上

替换旧内容d3

2 个答案: