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);
سؤال
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!
المحلول
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);