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在任何地方都没有这个类......它可能是一个不再重要的虚拟选择。也许有人可以解释有关行为的一些细节，以及这是否是一个很好的方法，或者是一个相当糟糕的方法。

d3.js - 仅添加圈元素而不更新现有

1 个答案: