How to Make True Zero Duration Instant Transitions in D3

Question

I've been using D3 to write a small program to graph data in real time as it comes in from a device. The device returns data at a rate of 256 samples/second (approximately one sample per 3.9 ms), and it is important that I graph as many of the data points as possible.

Here is the function I have that redraws the line after each time interval which looks like it should do exactly what I want, but it doesn't. It graphs data too slowly:

var ms_delay_between_samples = 3.9,
    current_i = 0,
    data = new Array(window_width_in_samples);

var path = svg.append("g")
           .attr("clip-path", "url(#clip)")
           .append("path")
           .data([data])
           .attr("class", "line")
           .attr("d", line);

for(var i = 0; i < data.length; i++) data[i] = null;

function tick() {

    data[current_i] = get_next_data_point();
    current_i = (current_i + 1) % window_width_in_samples;

    path
            .attr("d", line)
            .transition()
            .duration(ms_delay_between_samples)
            .ease("linear")
            .each("end", tick);

}

I have discovered that "graphing too slowly" comes from D3 itself. Basically, there is a ~17 ms delay that happens while waiting for the timer to kick in. Read the docs for the duration function and this text snippet from a different part of the docs to understand the problem I'm facing:

Transitions start automatically upon creation after a delay which defaults to zero; however, note that a zero-delay transition actually starts after a minimal (~17ms) delay, pending the first timer callback.

The "slowness" I'm experiencing is from the ~17 ms duration plus the 3.9 ms duration I set. From all of the D3 examples I've seen, a duration is required for all transitions and redraws, but I need to redraw without a transition with duration. Does anybody know how I'd go about doing this? I've spent a few hours searching online and came up with nothing.

I've even tried downsampling the data by 3 (to ~85.3 samples/second) and plotting 2 of the downsampled samples every 23.4 ms to get around the ~17 ms delay, but it just makes the delay time 23.4 ms + ~17 ms = ~40.4 ms per sample instead of the 3.9 ms + ~17ms = ~20.9 ms delay I was experiencing before.

Please help me?

Answer 1

I think your best bet for fast and smooth animation would be to forgo transitions and use window.requestAnimationFrame . I think it would look something like this:

function tick() {

    data[current_i] = get_next_data_point();
    current_i = (current_i + 1) % window_width_in_samples;

    path.data(data).attr("d", line);

    window.requestAnimationFrame(tick);
}

That would request data as quickly as the browser is able to receive and draw it.