在 D3JS 中更新文本标签答案

【问题标题】：Updating Text Labels in D3JS在 D3JS 中更新文本标签
【发布时间】：2012-08-18 18:29:42
【问题描述】：

过去几天我一直在努力解决这个问题：我有一个力有向图，可以像 this example 那样标记它的边缘。我面临的问题是，当图表更新时（即：在用户点击时添加图表上的一个节点）它会更新图表，但它会留下我之前写的旧边标签：

添加新图表之前和之后：

如您所见，我的边缘标签在更新后仍然存在。我有一个函数，每次有新数据进来时都会被调用，在这个函数中，我有以下代码来绘制标签：

path_text = svg.selectAll(".path")
.data(force.links(), function(d){ return d.name;})
.enter().append("svg:g");
path_text.append("svg:text")
.attr("class","path-text")
.text(function(d) { return d.data.label; });

svg 变量在顶级闭包中声明一次，如下所示：

var svg = d3.select("body").append("svg:svg")
        .attr("viewBox", "0 0 " + width + " " + height)
        .attr("preserveAspectRatio", "xMidYMid meet");

我的图表有一个 tick() 函数，可以像这样计算每个标签的位置：

function tick()
    {
            // Line label           
            path_text.attr("transform", function(d) 
            {
                var dx = (d.target.x - d.source.x),
                dy = (d.target.y - d.source.y);
                var dr = Math.sqrt(dx * dx + dy * dy);
                var sinus = dy/dr;
                var cosinus = dx/dr;
                var l = d.data.label.length * 6;
                var offset = (1 - (l / dr )) / 2;
                var x=(d.source.x + dx*offset);
                var y=(d.source.y + dy*offset);
                return "translate(" + x + "," + y + ") matrix("+cosinus+", "+sinus+", 

"+-sinus+", "+cosinus+", 0 , 0)";
                });
.
.
.

我尝试将这个 svg 声明下移到更新函数中，这样每次图形发生变化时都会对其进行实例化。这实际上有效 - 但它会完全复制整个图表。第一个，原始副本仍然保留旧标签 - 但第二个副本完全按照我的意愿行事。有没有办法，也许，而不是附加 svg，有一种替换的方法？我也试过在没有任何运气的情况下调用 exit().remove()。

非常感谢您抽出宝贵时间。这一直让我不知道该怎么做。

【问题讨论】：

您阅读教程Thinking with Joins了吗？您将 enter() 选择直接链接到数据连接之外，因此您忽略了更新和退出选择。您需要按照教程中的说明处理所有三种状态。
bl.ocks.org/MoritzStefaner/1377729

标签： javascript d3.js label force-layout

【解决方案1】：

我将 svg 声明放在我的图形更新函数中，将其附加到 div，并在再次附加之前清除 div：

jQuery('#v').empty();
var svg = d3.select("#v").append("svg:svg")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("preserveAspectRatio", "xMidYMid meet");

在我看来，这不是最干净的解决方案，但除非你们都有更好的解决方案，否则会采用这个解决方案！

【讨论】：