d3 transition 点击​​节点

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

鼠标点击功能是

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)

;}