Recently, I embarked on learning d3 and my current project involves creating a transition effect where text appears upon clicking mouse events on tree nodes. The nodeLayout is derived from the d3.layout.tree().
var node = svg.selectAll("g.classNode")
.data(nodeLayout.filter(function(d){return d.depth < 2;}));
var nodeEnter = node
.enter()
.append("g")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
.on("mouseover",mouseover)
.on("mouseout",mouseout)
.on("click",mouseclick);
Here's the mouseclick function:
function mouseclick(d) {
d3.select(this).append("text")
.transition()
.duration(2000)
.attr("x",100)
.attr("y",30)
.attr("font-family", "sans-serif")
.attr("font-size", "16px")
.text(function(d){if(d.depth==1)return Hello;});}
I've encountered an issue where the .duration doesn't seem to be working as expected, but oddly enough, the .delay does. If anyone has any insights into why this might be happening, I would greatly appreciate it.