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

鼠标点击功能

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)

;}