0

さて、次のコード例があります。ここでは、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)
    })

どんな助けでも大歓迎
ですありがとう！

4

2 に答える 2

1

d3.event.targetイベントハンドラでクリックされている要素にアクセスするために使用できます。たとえば、このjsfiddleを参照してください。

于 2012-12-05T21:09:59.493 に答える
1

LarsKotthoffが書いたものはうまくいくでしょう。あるいは–そしてどちらがより慣用的かわかりません：

クリックハンドラー内では、thisコンテキストはクリックされたDOM要素を参照します。

したがって、以下もそれを行います：

.on("click",function(d){
  d3.select(this)
    .transition()
    .duration(1000)
    .attr("r",1000)
});
于 2012-12-05T21:14:59.140 に答える