dagre-d3 - 如何在不重新渲染图形的情况下更新 dagreD3 节点样式

Question

有没有办法改变节点的样式而不必重新渲染图形，就像下面的最后一个代码块一样？

var g = new dagreD3.graphlib.Graph({compound:true})
  .setGraph({}).setDefaultEdgeLabel(function() { return {}; });

g.setNode('step1', {label: 'Step 1', style: "fill:gray" });
g.setNode('step2', {label: 'Step 2', style: "fill:gray" });
g.setNode('step3', {label: 'Step 3', style: "fill:gray" });

g.setEdge('step1', 'step2');
g.setEdge('step2', 'step3');

var render = new dagreD3.render();
var svg = d3.select("svg").append("g");
render(d3.select("svg g"), g);

// example node color change
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
sleep(2000).then(() => {
  // ????? another way to do this without calling render()?
  g.node('step1').style = "fill:blue";
  render(d3.select("svg g"), g);
});

Answer 1

要更新 D3 节点而不再次调用渲染：

nodeid = "step1";
d3.select('#' + nodeid).attr('style', 'fill:blue');

例子：

svg.selectAll("g.node").on("click", function (id) {
    d3.select('#' + id).attr('class', 'bluebackground');
});