Question

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!

Was it helpful?

Solution

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);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top