the "resize" helper triggers twice when the returned chart depends on a generator/input

[ccattuto]

Consider the example below, where activityChart() returns a Plot.plot() object, and attRange is a generator/input. On instrumenting activityChart() and triggering one change of attRange it is observed that activityChart() gets called twice. This looks like an issue for cases when the plot is heavy to compute.

<div class="card">
  ${resize((width) => activityChart(data, attRange, {width}))}
</div>

[mbostock]

Yep, the problem is rendering the chart changes the height of the container, which then triggers the ResizeObserver. This is the expected behavior when you pass a render function that takes both width and height as two arguments, but we can optimize this to ignore changes in height when render only takes a single width argument.

[ccattuto]

thanks for the clarification!

[ccattuto]

PS @mbostock : in cases where we know that both width and height will not change as a consequence of changes in attRange, is there anything better one could do? I have an issue with a D3 graph layout inside an SVG element. I want the graph layout to be recomputed only when the element changes in size, not when a parameter that does not affect layout (case in point, attRange, changes). As it is now, a change in attRange will result in the whole graph layout needing to be recomputed, as the contained SVG element gets destroyed. Should I simply avoid using the resize helped in these more complex cases?

[mbostock]

@ccattuto This would be better as a discussion question rather than tacking on to this (no longer related) issue. But it sounds like you want to avoid reacting to attRange changes. In that case you’d need to use mutable state rather than a generator to avoid reacting. But doing that may greatly increase the complexity of your code as you are now responsible for re-rendering the graph manually rather than as a pure function of state.

[ccattuto]

Thanks. I'll move this to a discussion, as it may be of interest to others.
#1567