d3 transition click on node

Question

I have just started learning d3 and I am trying to make a transition of appearing text on a mouse click event on tree nodes. The nodeLayout is the production of 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);

And the mouseclick function is

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

The .duration is not working but the .delay is. Anybody knows why? Thank you very much.

Answer 1

If you want to show the text gradually try to set the text attributes first and change the opacity only in the transition. Something like this:

function mouseclick(d) {

d3.select(this).append("text")
    .attr("x",100)
    .attr("y",30)
    .attr("font-family", "sans-serif")
    .attr("font-size", "16px")
    .text(function(d){if(d.depth==1)return Hello;})
    .style("opacity", 1e-6)
    .transition()
       .duration(2000)
       .style("opacity", 1)

;}