d3.js에서 전환이있는 심볼의 크기를 변경하십시오.

Question

전환을 통해 심볼의 크기를 변경하고 싶습니다. 원이 있다면 쉽게 알 수 있습니다 :

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

그러나 기호를 사용하면 크기 속성을 얻는 방법을 모르겠습니다. 나는 이것을 시도했다 :

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

하지만 그건 작동하지 않았다 - (아래로 마우스의 기호에 변화) 당신의 도움에 대한

감사합니다!

Answer 1

당신은 d 속성에 애니메이션을 적용 할 수 있습니다 : 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);