Question

我使用sunburst示例作为基础并尝试更改多线单击新数据时的标题。 点击功能如下所示：

function click(d) {

text.transition().attr("opacity", 0);

console.log(d.depth);

path.transition()
    .duration(750)
    .attrTween("d", arcTween(d))

.each("start", function(e, i) {

    if (e.x >= d.x && e.x < (d.x + d.dx))

    {
        var replaceText = d3.select(this.parentNode).select("text")
        replaceText.remove("tspan")

        var tspan = replaceText.append("tspan")
            .attr("class", "sunburst2")
            .attr("x", 0)
            .attr("y", 0)
            .attr("text-anchor", "middle")
            .text("TEST");

    }

})

//each
.each("end", function(e, i) {

    if (e.x >= d.x && e.x < (d.x + d.dx))

    {

        var arcText = d3.select(this.parentNode).select("text")

        arcText.transition().duration(750)
            .attr("opacity", 1)
            .attr("transform", function(d) {
                return "translate(" + getCentroid(d) + ")rotate(" + textRotation(d) + ")";
            })
            .attr("text-anchor", "middle")


    }

});
//end of each

}

PS：在此示例中，初始字幕应替换为＆＃34; TEST＆＃34;。

但它不起作用，什么都不显示。我做错了什么？提前致谢。任何建议都会有所帮助。

Answer 1

我通过实验找到了解决方案。不应使用replaceText.remove("tspan")，而应使用replaceText.selectAll("*").remove();

宾果！

D3.JS动态替换<tspan>

1 个答案: