Question

我是D3的新手，我被困在一个案子上。我有一个按钮，可以为我的svg添加圆圈。

    d3.select("button#add").on("click", function()
    {
      svg.append('circle')
      .attr('class', 'little')
      .attr("cx", Math.random()*280+10)
      .attr("cy",Math.random()*280+10)
      .attr("r", 12);
    });

之后我想在你点击一个圆圈时改变颜色。出于某种原因，代码甚至无法启动事件。

d3.selectAll(".little").on('click', function()
    {
        d3.select(this).style("fill", "red");
    });

Answer 1

这是一个FIDDLE来帮助你。

...
function paintCircle(d) {
    d3.select(this)
        .style("fill", "red");
};

Answer 2

问题在于：

d3.selectAll(".little").on('click', function() {
        d3.select(this).style("fill", "red");
});

只运行一次。但是当按钮单击创建一个新圆圈时，它会在不添加onclick属性的情况下创建它，并且由于上面的代码不再运行，因此新圆圈没有用于单击的事件侦听器。

要解决此问题，只需在创建圈子时添加.on部分，或确保每次制作新圈子时都运行上述代码（我不建议您这样做，除非您的回调功能每次都在改变。）

D3选择全部改变颜色

2 个答案: