d3.js - 只添加圆形元素不更新现有

Question

我刚刚进入d3.js，目前我的 svg 背景中有一个圆圈。我现在想添加 5 个绑定到特殊数据的额外圆圈。

如果我用 selectAll 这样做，不幸的是，只有 4 个带有新数据的圆圈被附加。 5 个中的第一个似乎选择了现有的，并且没有更新。

如何在我的 svg 中有一个现有的圈子，并添加 5 个绑定到新数据的其他圈子，最终总共有 6 个圈子？

这是我的一些代码：

$(document).ready(function() {


//draw svg
var svgContainer = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 600);
//add group to contain all circles
var svgGroup = svgContainer.append("g");

//add bg circle
var bgCircle = svgGroup.append("circle")
    .attr("cx", 300).attr("cy", 300).attr("r", 120)
    .attr("fill", "black");

//add circles
var circles = svgGroup.selectAll("circle")
    .data([
        {cx: "250", cy: "300", r: "12", color: "red"},
        {cx: "300", cy: "300", r: "12", color: "red"},
        {cx: "350", cy: "300", r: "12", color: "red"},
        {cx: "400", cy: "300", r: "12", color: "red"},
        {cx: "450", cy: "300", r: "12", color: "red"},
    ])
    .enter()
    .append("circle")
    .attr("cx", function(d) { return d.cx; })
    .attr("cy", function(d) { return d.cy; })
    .attr("r", function(d) { return d.r; })
    .attr("fill", function(d) { return d.color; }) });

您应该在背景中看到 4 个红色圆圈和一个黑色圆圈。 我现在想要 5 个红色圆圈，而黑色仍在背景中。

请有人告诉我该怎么做。 我试图通过了解 d3 的进入、更新和退出来实现它，但这并没有太大帮助......

提前致谢 干杯

Answer 1

我刚刚找到了一种方法。 通过不选择圆形元素而是选择一个类名，我可以从新选择中排除旧圆形，因此 5 个元素仍然没有绑定数据，而 d3 添加了 5 个元素。

在此处查看示例代码。

$(document).ready(function() {


//draw svg
var svgContainer = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 600);
//add group to contain all circles
var svgGroup = svgContainer.append("g");

//add bg circle
var bgCircle = svgGroup.append("circle")
    .attr("cx", 300).attr("cy", 300).attr("r", 120)
    .attr("fill", "black");

//add circles
var circles = svgGroup.selectAll(".dataCircle")
    .data([
        {cx: "250", cy: "300", r: "12", color: "red"},
        {cx: "300", cy: "300", r: "12", color: "red"},
        {cx: "350", cy: "300", r: "12", color: "red"},
        {cx: "400", cy: "300", r: "12", color: "red"},
        {cx: "450", cy: "300", r: "12", color: "red"},
    ])
    .enter()
    .append("circle")
    .attr("cx", function(d) { return d.cx; })
    .attr("cy", function(d) { return d.cy; })
    .attr("r", function(d) { return d.r; })
    .attr("fill", function(d) { return d.color; })



});

查看我选择的 .circleData 类。 生成的 HTML 在任何地方都没有类......它可能是一个不再重要的虚拟选择。 也许有人可以解释有关该行为的一些细节，以及这是一种好方法还是一种相当糟糕的方法。