Javascript 更新D3JS中的文本标签
在过去的几天里,我一直在努力解决这个问题:我有一个力定向图,可以像它一样标记它的边。我面临的问题是,当图形更新时(即:在用户单击时添加图形上的节点),它会更新图形,但会留下我以前编写的旧边标签: 添加新图形之前和之后: 正如您所看到的,我的边缘标签在更新后挂起。我有一个函数,每次新数据进入时都被调用,在这个函数中,我有以下代码来绘制标签:Javascript 更新D3JS中的文本标签,javascript,d3.js,label,force-layout,Javascript,D3.js,Label,Force Layout,在过去的几天里,我一直在努力解决这个问题:我有一个力定向图,可以像它一样标记它的边。我面临的问题是,当图形更新时(即:在用户单击时添加图形上的节点),它会更新图形,但会留下我以前编写的旧边标签: 添加新图形之前和之后: 正如您所看到的,我的边缘标签在更新后挂起。我有一个函数,每次新数据进入时都被调用,在这个函数中,我有以下代码来绘制标签: path_text = svg.selectAll(".path") .data(force.links(), function(d){ return d.
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");
My graph有一个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声明向下移动到update函数中,以便在每次图形更改时都实例化它。这实际上是可行的,但它使整个图形完全重复。第一份原件仍然保留着旧的标签,但第二份的行为正是我想要的。有没有一种替代svg的方法?我也尝试过调用exit().remove(),但没有任何运气
非常感谢您抽出时间。关于我应该如何做这件事,这让我感到非常痛苦。我将svg声明放在我的graph update函数中,将其附加到一个div,并在再次附加它之前清除该div:
jQuery('#v').empty();
var svg = d3.select("#v").append("svg:svg")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("preserveAspectRatio", "xMidYMid meet");
在我看来,这不是最干净的解决方案,但除非你们都有更好的解决方案,否则我们将继续使用它 你看过教程了吗?您将enter()选择直接链接到数据联接之外,因此忽略了更新和退出选择。您需要处理所有三种状态,如本教程中所述。