Question

我正在寻找一种方法来更新数据更改时的多个节点属性和附加元素。

以下是我现在尝试做的方法。每次调用此函数或链接数据都会更改。

function restart() {

  link = link.data(links);

  link
    .enter().insert("line", ".node")
    .attr("class", "link")
    .on('click' , function(d, i){ 
      console.log(d);
      links.splice(i,1);
      restart();
    })
    .on("mouseover", function() { 
      d3.select(this).style("stroke","red"); 
      d3.select(this).style("stroke-width","5px"); 
    })
    .on("mouseout", function() { 
      d3.select(this).style("stroke","#999");
      d3.select(this).style("stroke-width","initial");  
    });

  link
    .exit().remove();

  node = node.data(nodes);

  node
    .enter()
    .append("g")
    .attr("class", "node")
    .call(node_drag);

  node
    .insert("circle", ".cursor")
    .attr("r", function(d) { return calcSize(d.links+1); })

  node
    .append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.links });

  node
    .exit().remove();

  force.start();

}

可以在此处看到当前状态的完整代码：http://jsbin.com/takatugazo/edit?html,js,output

预期的行为是当两个节点被拖入彼此时，他们会创建一个链接，他们拥有的链接越多，他们就越大。

Answer 1

您的附加文本正在更新。唯一的问题似乎是，它不是替换旧文本，而是在顶部添加<text>元素。如果您只是检查一个节点，您将根据它拥有的链接数找到多个<text>元素。出于某种原因，您的代码不会按照应有的方式更新文本。

尝试删除文本元素，然后再附加一个文本元素：

node.select("text").remove()

node
.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.links });

node
.exit().remove();

我在JS Bin中做了这些更改，它似乎对我有用（有点延迟）：http://jsbin.com/goqumutelu/edit?html,js,output

只要链接被按下，dragend（）函数就会有延迟（不确定是否有意？）所以如果你不想要延迟：删除超时，或者只是替换延迟值（1500 ）到0应解决：http://jsbin.com/hazecozumu/1/edit?html,js,output

关于节点的大小，有什么不对吗？你还想要它更新吗？

如何更新D3.js力图中的节点数据？

1 个答案: