过去几天我一直在努力解决这个问题:我有一个力导向图,它像 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() 也没有任何运气。
非常感谢您的宝贵时间。这一直困扰着我应该如何做到这一点。
最佳答案
我将 svg 声明放在我的图形更新函数中,将其附加到一个 div,并在再次附加它之前清除该 div:
jQuery('#v').empty();
var svg = d3.select("#v").append("svg:svg")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("preserveAspectRatio", "xMidYMid meet");
在我看来这不是最干净的解决方案,但除非你们都有更好的解决方案,否则我会继续使用它!
关于javascript - 在 D3JS 中更新文本标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12021194/