Question

好的，所以我有以下代码示例，其中我在svg元素中有圆圈。每个圆圈都有一个点击事件，我正在尝试为点击的圆圈设置动画。目前所有圈子都是动画的，因为我指的是泡泡对象。我想要的是将被点击的对象称为自己而不是其他对象：

 var data_items=[100,200,300];

 var svg = d3.select("#chart")
        .append("svg").attr("width", 800).attr("height", 600);

 var g = svg.selectAll(".bubbleContainer")
      .data(data_items)
      .enter().append("g")
      .attr("class","bubbleContainer");

 var bubble = g.append("circle")
       .attr("class","bubble")
       .attr("cx", function(d) {
              return d;
       })
       .attr("cy", function(d) { 
         return d
        })
       .attr("r", function(d) {
            return d/2
        })
        .on("click",function(d){
        bubble
        .transition()
        .duration(1000)
        .attr("r",1000)
    })

非常感谢任何帮助
谢谢！

Answer 1

您可以使用d3.event.target来访问在事件处理程序中单击的元素。请参阅示例this jsfiddle。

Answer 2

Lars Kotthoff所写的内容将起作用。或者 - 我不确定哪个更惯用：

在点击处理程序中，this上下文引用所单击的DOM元素。

所以以下也会这样做：

.on("click",function(d){
  d3.select(this)
    .transition()
    .duration(1000)
    .attr("r",1000)
});

在d3js中为此元素设置动画

2 个答案: