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

但是使用符号，我不知道如何获得size属性。我试过这个：

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

使用d3.js中的转换更改符号的大小

1 个答案: