CODEWITHSUNDEEP
javascriptd3.js
climboid
climboid

Reputation: 6952

animate this element in d3js

Ok so I have the following code example where I have circles in an svg element. Each circle has a click event and I'm trying to animate the circle that was clicked. Currently all circles animate because I'm referring to the bubble object. What I want is to refer to the clicked object its self and not the other ones:

 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)
    })

Any help is much appreciated
Thanks!

Upvotes: 0

Views: 1008

Answers (2)

meetamit
meetamit

Reputation: 25157

What Lars Kotthoff wrote would work. Alternatively – and I'm not sure which is more idiomatic:

Inside the click handler, the this context refers to the clicked DOM element.

So the following would do it too:

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

Upvotes: 1

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You can use d3.event.target to access the element that is being clicked in the event handler. See for example this jsfiddle.

Upvotes: 1

Related Questions