title: Change the size of a symbol with a transition in d3.js
body: <p>I would like to change the size of a symbol through a transition. With a circle it's easy:  </p>
  
  <pre><code>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);
     });
  </code></pre>
  
  <p>But with a symbol, I'm not sure how to get ahold of the size attribute.  I've tried this:</p>
  
  <pre><code>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);
     });
  </code></pre>
  
  <p>But that didn't work - (no change in the symbol on mouse down)</p>
  
  <p>Thanks for your help!</p>