在 d3.js 中修改节点和边属性

Question

我正在使用 d3.js 使用强制布局来布局节点和链接图。节点用圆圈表示；逐行链接。在某些情况下，我想更改线条或节点的视觉特征（例如颜色、大小、不透明度等）以表示图形上的某些状态变化。我已经能够通过重绘图表来做到这一点，但这会抖动所有节点，导致混乱而不是清晰。

创建图表的代码：

force = d3.layout.force()
        .charge(-120)
        .gravity(0.2)
        .linkDistance(30)
        .size([width-pad, height-pad]);


nodeSet = svg.selectAll(".qNode");
// BIND NODE DATA
nodeSet = nodeSet.data(chartData.nodes);
// CREATE NODES
nodeSet.enter().append("circle")
    .attr("class", "qNode")
    .attr("r", function(d) { return d.size();})
    .style('stroke-opacity', function(d) { return d.opacity(); })
    .style('stroke', function(d) { return d.color(); })
    .style("fill", function(d) { return color(1); });
//similarly for links.

force.nodes(chartData.nodes).links(chartData.links).start();

为了更新图表，我使用了这个片段：

    // SELECT NODES
    nodeSet = svg.selectAll('.qNode');
    // JOIN NODES
    nodeSet = nodeSet.data(force.nodes());
    // UPDATE NODES
    nodeSet.attr("class", "qNode")
    .attr("r", function(d) { return d.size();})
    .style("fill", function(d) { return color(1); })
    .style('stroke', function(d) { return d.color(); })
    .style('stroke-opacity', function(d) { return d.opacity(); })
    .style('opacity', 1)
    .call(force.drag);
    // CREATE NODES
    nodeSet.enter().append("circle")
    .attr("class", "qNode")
    .attr("r", function(d) { return d.size();})
    .style("fill", function(d) { return color(1); })
    .call(force.drag);
    // DELETE NODES
    nodeSet.exit().remove();


    // START SHOW
    force.start();

运行时，整个图形在应用新的笔划属性之前会稍微晃动。

所以我有两个问题：假设数据对象中的状态更改将为d.size()、d.color() 等返回不同的值，

1. 如何在不抖动任何节点的情况下修改图形的视觉外观？
2. 如果我确实想要抖动节点，我可以确定要抖动哪组节点吗？ （这样我就可以通知用户哪个链接器节点的视觉外观发生了变化。）

已编辑

我暂时已经放弃了调整节点，但是下面的代码（基于@defenestrated 的建议）似乎可以更新图中某些节点和边的属性：

var allLinks = ... // my links from a d3 selectAll
var allNodes = ... // my nodes from a d3 selectAll
force = ... // my d3 force layout
function updateGraph(graph, nodeSubset, linkSubset) {
    for (var i=0; i<allLlinks.length; i++)
        allLinks[i].selected = false;
    for (var i=0; i<allNodes.length; i++)
        allNodes[i].selected = false;
    for (var i=0; i<linkSubset.length; i++)
        linkSubset[i].selected = true;
    for (var i=0; i<nodeSubset.length; i++)
         nodeSubset[i].selected = true;

    // these functions modify the selected nodes and links
    linkSubset.call(setLinkAttributes);
    nodeSubset.call(setNodeAttributes);

    if (force.alpha() == 0) {
        force.start();
        force.stop();
    }
}

function setLinkAttributes(links) {
    link.style(...);
}

function setNodeAttributes(nodes) {
    nodes.style(...);
}

如果在应用属性后图形仍在移动（如果是alpha() > 0），我不需要调用start/stop 或resume，因为随后的刻度会拾取新属性。如果图形已经稳定，调用 start 会刷新它而不移动节点。

Answer 1

1. 您是否尝试过在“更新节点”块之前调用force.stop()，在之后调用force.resume()？

2. 您可以根据它们的状态对它们进行分类 - 因此您可以将.attr("id", "changed") 应用于正在更新的节点，然后在 d3 选择中使用它，例如。 changedNodes = d3.select("#changed")