Performant way to update scales?

I’m trying to make a chart where the scale’s domain is adjustable through a slider (input[type=“range”]) beneath the chart. (Like this, for example.)

The problem that I am running into is that using setState is not performant, as I would like updates to happen every few ms as the slider is dragged, and not just about once per second.

With setState, I’d do something like this:

onRangeChange(e) {
  const newMaxDays = // calculation
  this.setState({ maxDays: newMaxDays })
}

render() {
  data = someData()

  const xScale = scalePower({
    range: [0, width],
    domain: [0, this.state.maxDays],
    exponent: 0.5
  })

  return (
    <div>
      <svg>
        <LinePath
          data={data}
          x={(d) => xScale(d.index)}
          y={(d) => yScale(d.price)}
        />
      </svg>
      
      <input
        type="range"
        min={0}
        max={100}
        defaultValue={50}
        onChange={(e) => this.onRangeChange(e)}
      />
    </div>
  )

This example ^ is slow and laggy. As the user drags the range slider, the chart scale updates, but it is very choppy.

The more performant alternative is to use the innerRef property on the line path so I can access it directly, and then use native d3 logic to set the scale. But I’m having trouble figuring out how to do this.

constructor(props) {
  this.lineRef = React.createRef();
  this.xScale = null
  this.yScale = null
}

onRangeChange(e) {
  const newMaxDays = // calculation

  // TODO: apply the updated xScale to the view... but how??
  // The following doesn't work...

  this.xScale.domain([0, newMaxDays])

  const line = d3.line()
    .x(d => this.xScale(d.index))
    .y(d => this.yScale(d.price))

  d3.select(this.lineRef.current)
    .attr('d', line)
}

render() {
  data = someData()

  this.xScale = scalePower({
    range: [0, width],
    domain: [0, maxDays],
    exponent: 0.5
  })

  this.yScale = ...

  return (
    <div>
      <svg>
        <LinePath
          innerRef={this.lineRef}
          data={data}
          x={(d) => this.xScale(d.index)}
          y={(d) => this.yScale(d.price)}
        />
      </svg>
      
      <input
        type="range"
        min={0}
        max={100}
        defaultValue={50}
        onChange={(e) => this.onRangeChange(e)}
      />
    </div>
  )

Any tips or is there a different preferred way to do this?

[williaster]

Hi @cilphex 👋 thanks for checking out vx. Perf in react land can indeed be a tricky thing. Your solution does mix mental models of d3 vs react manipulating the dom, which is why we created vx so I hope we can get a “pure vx/react” solution 😄 (and I thiiiink that your approach might result in subtle bugs because once you modify the d attribute of the ref, the dom is actually different from what react thinks it is).

I’m curious if a “pure react” version like the following would work, basically you are using the children render function for full control over the LinePath rendering and to get access to the line/path generator, and only updating the scales + domain when needed (note I haven’t tested this, just wrote it up so might be errors I didn’t catch). It may still re-initialize the line, but might be worth a shot to try and leverage the children render function override.

function MyLine({ width, height, data }) {
  const [maxDays, setMaxDays] = useState(/** initialMaxDays */);
  
  // recompute scales only if chart dims or data change
  const yScale = useMemo(() => /** compute yScale */, [data, height]);
  
  const xScale = useMemo(() => scalePower({
    range: [0, width],
    domain: [0, maxDays],
    exponent: 0.5
  }), [data, width]);

  useEffect(() => {
    // update the x domain when maxDays changes
    xScale.domain([0, maxDays])
  }, [maxDays]);

  return (
    <>
      <input {...} onChange={() => setMaxDays(...)} />
      <svg {...}>
        <LinePath>
          {({ path }) => (
            // get an empty default path, override x and y
            path.x(d => xScale(d.index));
            path.y(d => yScale(d.price));

            return (
              <path d={path(data) || ''} {...} />
            );
          )}
        </LinePath>
      </svg>
    </>
  );
}

[cilphex]

@williaster I think LinePath.children is missing from the documentation?

Also curious how you would apply this solution to the Grid component. It also has no children property according to the documentation. (But now I’m not sure if that’s because the documentation is lacking or if it really doesn’t.)