Forcing re-render for `call` key?

[Cgg]

Hi,

I am using d3-render for a project where I am displaying a time udpated with new data points on an interval. (So every x millisecond a data point gets pushed at the end of the series, and the graph shows the last y minutes).

I started with using a static axis (showing ticks for "now", "1 minute ago", "2 minutes ago" and so on) but have been looking into sliding axis (showing actual time, and sliding right as time moves on)

I started with this:

function renderGraph () {
  d3Render([
    {
      append: "g",
      transform: myAxisTranslate
      call: d3.axisBottom(xScale) // xScale is a timeScale
    }
  ]);
}

However the axis gets drawn correctly only once (the first time) and isn't sliding afterwards. I have looked at how d3Render handles the call key and gathered this would be because the function passed to call is only executed once, when the element is added. Since my axis is only added once, the generator is only called once, and the axis is static.

I have worked around my problem like so:

function renderGraph () {
  d3Render([
    {
      append: "g",
      class: "x-axis"
      transform: myAxisTranslate,
    }
  ]);
  d3.select(".x-axis").call(d3.axisBottom(xScale));
}

And the axis slides beautifully.

If this pattern is deemed okay then perhaps it could be mentioned somewhere in the doc (not just for dynamic axis, anything that uses a generator applied to a d3 element could benefit)

Alternatively one thing that could be done to address this would be maybe a forceCall key? If provided it would call the supplied function each time the d3Render function is called.

Either way happy to submit a PR.

[unkleho]

Hi @Cgg I've used this pattern before: By updating key, whenever it changes, it should run the function in call.

I'm not sure if this suits your purposes. Getting it to just work is definitely on the roadmap.