d3从svg中删除文本

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

您可以使用“删除”功能删除文本元素。这是相同的工作代码 sn-p。

var text = d3.select("body")
  .append("text")
  .text("Hello...");

setTimeout(function() {
  text.remove();
}, 800);

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

顺便说一句，您的代码中的问题是，您正在迭代每个链接 (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);