d3过渡单击节点

Question

我刚刚开始学习d3，并且尝试在树节点上的鼠标单击事件上转换显示文本的方式。 nodeLayout是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);

而mouseclick功能是

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

.duration不起作用，但.delay有效。 有人知道为什么吗？ 非常感谢你。

Answer 1

如果要逐渐显示文本，请尝试先设置文本属性，然后仅在过渡中更改不透明度。 像这样：

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)

;}