Question

我有滑块修改路径的S命令。我希望源名称出现在它所做的路径上;但是如何删除以前创建的文本元素？我试图将其删除（请参阅下面的代码），但它不起作用。 dom只是填充了额外的文本元素，路径上的文字变得越来越暗，因为它们开始堆积在一起。我甚至试图通过id检查文本元素，但是没有去。希望您能够了解如何删除文本元素，以便在修改每个S命令时只有一个。

我在这里添加了一个小提琴（在代码窗口的最底部附加文本）： fiddle...

graph.links.forEach(function (d, i) {
        //console.log(obj[0].text, graph.links[i].source.name, graph.links[i].linkid);

        if (graph.links[i].source.name == obj[0].text) {

            var linkid = graph.links[i].linkid;
            var the_path = $("#" + linkid).attr("d");
            var arr = $("#" + linkid).attr("d").split("S");

            //update S command
            $("#" + linkid).attr("d", arr[0] + " S" + scommand_x2 + "," + scommand_y2 + " " + scommand_x + "," + scommand_y);

            svg.select("#txt_" + linkid).remove();

            svg.selectAll("#" + linkid).data(graph.links).enter()
                .append("text")
                .attr("id", "txt_" + linkid)
                .append("textPath")
                .attr("xlink:href", function (d) {
                    return "#" + linkid;
                })
                .style("font-size", fontSize + "px")
                .attr("startOffset", "50%")
                .text("")
                .text(graph.links[i].source.name);

        }
    });

Answer 1

这是一个解决方案：

https://jsfiddle.net/kx3u23oe/

我做了几件事。首先，您不需要按照您的方式将此文本绑定到数据。其次，我将变量移到update函数之外，所有append：

var someText = svg.append("text").append("textPath");

然后我只在update函数中保留了这个：

someText.attr("xlink:href", "#L0")
            .style("font-size", "12px")
            .attr("startOffset", "50%")
            .text("some text");

Answer 2

您可以使用＆＃39;删除＆＃39;删除文本元素功能。这是一个相同的工作代码段。

＆＃13;

var text = d3.select("body")
  .append("text")
  .text("Hello...");

setTimeout(function() {
  text.remove();
}, 800);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

顺便说一下，代码中的问题是，您正在迭代每个链接（graph.links.forEach(function (d, i) {）并在每次迭代中为所有链接（.data(graph.links).enter()）创建一个文本元素。这会创建n * n个文本标签;其中n是链接数。所以我假设您的代码应如下所示。

 svg.select("#txt_" + linkid).remove();
 svg.selectAll("#" + linkid)
    .append("text")
    .attr("id", "txt_" + linkid)
    .append("textPath")
    .attr("xlink:href", function (d) {
        return "#" + linkid;
    })
    .style("font-size", fontSize + "px")
    .attr("startOffset", "50%")
    .text(graph.links[i].source.name);

d3从svg中删除文本

2 个答案: