D3.js扫描图

Question

I am building a dynamic line graph with d3.js that shows a fixed period of time and associated data values (high data resolution), and is constantly updated with the latest data sets.

There are lots of examples that use a push/pop and translate mechanism to get a line that scrolls across the viewable area.

Rather than scrolling the graph, I would like the graph to remain fixed and instead, scroll the 'pen'. The effect would be much like the unrolling line example found here

When my line gets to the end of the viewable area, I would like to wrap back to the start and begin overwriting the previously drawn line. Essentially the pen would go from left to right, jump back to the left and repeat.

The only way I can think to accomplish this is to continuously update the portion of the data set that needs to change and redraw. I'm concerned this will force the entire line to be redrawn which will not be acceptable in terms of performance.

What am I not thinking of? What is the best/optimized way to accomplish this task?

Answer 1

var live_data = [...];// live values you should write and rewrite in this array
...
var live_path = svg.append("svg:path").attr("d", live_line_form(live_data));
...

and the d attribute formatter:

function live_line_form(array_of_values){
    var d = "M", x_domain = 1.0, y_domain = 1.0;
    array_of_values.forEach(function(val, i){
        d = d + i * x_domain + "," + val * y_domain + " "
    });
    return(d.trim);
}