2

Is there a way to change the style of a node without having to re-render the graph, like in the last code block below?

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);
});
simpleuser
  • 1,617
  • 25
  • 36

1 Answers1

2

To update a D3 node without calling render again:

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

Example:

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