首页 文章

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

提问于
浏览 次
0

我刚刚进入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的输入，更新和退出来实现它，但这并没有太多帮助......

在此先感谢欢呼

javascript svg d3.js append data-visualization

1 回答

  • 0

    我刚刚找到了一种方法 . 通过选择不是圆形元素而是选择一个类名，我可以从新选择中排除旧圆，因此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在任何地方都没有这个类......它可能是一个不再重要的虚拟选择 . 也许有人可以解释一些有关行为的细节，以及这是一个很好的方法，或者是一个相当糟糕的方法 .

    回复于

相关问题