2

I would like to change the size of a symbol through a transition. With a circle it's easy:

node =   svg.selectAll(".dot")
  .data(data)
.enter().append("circle")
  .attr("class", function(d) { return "dot " + d.module;})
  .attr("r", baseR)
  .attr("cx", function(d) { return x(d.x) ; })
  .attr("cy", function(d) { return y(d.y); })
  .style("fill", function(d) { return color(d.aIdx); })
  .on("mousedown", function (d) {
     d3.selectAll("." + d.module).transition().delay(0).duration(1000).attr("r", 10).style("opacity", 1);
})
  .on("mouseup", function (d) { 
    d3.selectAll("." + d.module).transition().delay(0).duration(1000).attr("r", baseR).style("opacity", 0.7);
   });

But with a symbol, I'm not sure how to get ahold of the size attribute. I've tried this:

cntrl =   svg.selectAll(".path")
  .data(controls)
.enter().append("path")
  .attr("class", function(d) { return "tri " + d.module;})
  .attr('d', d3.svg.symbol().type('triangle-up').size( function(d) { return baseR*baseR*2 }))
  .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
  .style("fill", function(d) { return color(d.aIdx); })
  .on("mousedown", function (d) {
d3.selectAll("." + d.module).transition().delay(0).duration(1000).attr("size", baseR*baseR*10).style("opacity", 1);
})
  .on("mouseup", function (d) {     
    d3.selectAll("." + d.module).transition().delay(0).duration(1000).attr("size", baseR*baseR*2).style("opacity", 0.7);
   });

But that didn't work - (no change in the symbol on mouse down)

Thanks for your help!

1
  • 1
    You could simply do .attr("transform", "scale(2)") and similar to shrink back. Apr 22, 2014 at 16:03

1 Answer 1

5

You can animate the d attribute: http://jsfiddle.net/Wexcode/UwEF9/

d3.selectAll("." + d.module)
  .transition()
  .delay(0)
  .duration(1000)
  .attr("d", d3.svg.symbol().type('triangle-up').size(baseR*baseR*10))
  .style("opacity", 1);
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.