Best practices for updating a D3 graph layout

[ccattuto]

I stumbled on an issue that I have a hard time working around, although it might be simply due to my partial understanding of Framework.

I have a D3 graph layout inside a card, like shown below, where param is a generator:

  <div class="card">
    <h2>Graph Layout</h2>
    <div id="graphLayout">
      ${resize((width) => graphChart(data, param, {width}))}
    </div>
  </div>
</div>

param is a generator: I want the graph layout to respond to changes in param as well as to changes in width.
The graphChart function builds a graph layout in the customary way for D3: creating an SVG element – if it doesn't exist already – and populating it with SVG shapes for nodes and links of the graph. The resize helper wraps this in a div element.

The issue I face is that any update, either to width or to param, results in the contents of the div element being destroyed, so that the D3 layout needs to be recomputed from scratch every time there is an update, and the previous positions of nodes and links have no continuity across updates. This results in the graph layout being "jumpy" across updates, a known issue that is usually taken care of by maintaining the previous positions of nodes and links in the created SVG objects, but that is impossible here as those elements get destroyed upon update.

My question is: should I simply get rid of the resize helper and implement reactivity to changes in width in some other way? Or am I missing something, and there there is a better way around this issue?

Thanks.

[Fil]

I agree that the resize helper is not of great help here. If the chart has an update() function attached to it, you might as well use it to also react to width updates.

[ccattuto]

thanks!

[mbostock]

I think the resize helper is doing exactly what it needs to do, which is calling a render function whenever the width changes. The trick is that you don’t want to recreate the chart within the render function — you want to update the existing chart. I’ve shown how to do that in my reply.

[ccattuto]

thanks a lot: your example is precisely what I was missing for harmonizing what I know about D3 graph layout updates with the reactive logic of Framework.

[mbostock]

You don’t have to create a new chart from scratch every time something changes; you can instead update an existing chart. But this tends to be more work than simply redrawing the chart from scratch: you need to track the dependencies from state to display explicitly so that when a certain bit of state changes, you update the corresponding part of the display.

Here’s an example of using the resize helper to update an existing chart rather than redraw it from scratch. When the page loads, a detached “skeleton” chart is initially drawn (in the selection svg). Then there’s an updateChart method that you can call whenever you want to update the chart; it performs the minimal update necessary to respond to changes in the width, height, or value.

The updateChart method is called in three places:

1. On load to set the initial (constant) height. (This could be moved to the initial skeleton chart if you prefer, but it seemed symmetric to support it within updateChart.)
2. Via resize whenever the width changes, returning the (previously rendered) svg.node() to be displayed.
3. Whenever clicks changes in a side-effect block (a code block that doesn’t render anything, but exists to react to clicks changing in response to clicking the button).

The updateChart method could have transitions too, if you wanted.

```js
const svg = d3.create("svg").attr("fill", "currentColor");

const text = svg.append("text").attr("dy", "0.35em").text("wut");

function updateChart({width, height, value}) {
  if (width !== undefined) {
    svg.attr("width", width);
    text.attr("x", width / 2);
  }
  if (height !== undefined) {
    svg.attr("height", height);
    text.attr("y", height / 2);
  }
  if (value !== undefined) {
    text.text(value);
  }
  return svg.node();
}

updateChart({height: 400});
```

```js
const clicks = view(Inputs.button("Increment"));
```

<div class="card">
  ${resize((width) => updateChart({width}))}
</div>

```js
updateChart({value: clicks});
```