d3.js line chart - updating the points values

[Jorge Rosa]

Hi,

How i can execute this code repetitively with a interval of 1 sec? The idea is update a d3.js line chart and move (smooth) the points in y axis of the chart.

var randomNumber = Math.floor(Math.random() * 6) + 1;

data =  [
            [{'x':0,'y':0},{'x':5,'y':0},{'x':10,'y':0},{'x':15,'y':3},{'x':20,'y':7},{'x':25,'y': randomNumber}]
        ];      

        // Add line
        var path = svg.selectAll('.d3-line')
            .data(data)
            .enter()
            .append("path")
                .attr("d", line)
                .attr("class", "d3-line d3-line-medium")
                .style('stroke-width', 3)
                .style('stroke', function(d,i){      
                    return colors[i%colors.length];
                });

        },500);  
        // Append dots
        // ------------------------------

        // Group dots
        var points = svg.selectAll('.d3-dots')
            .data(data)
            .enter()
            .append("g")
                .attr("class", "d3-dots");


        // Add dots
        points.selectAll('.d3-dot')
            .data(function(d, index) {    
                var a = [];
                d.forEach(function(point,i) {
                    a.push({'index': index, 'point': point});
                });  
                return a;
            })
            .enter()
            .append('circle')
                .attr('class', 'd3-dot')
                .attr("r", 0)
                .attr("transform", function(d) {
                    return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
                )
                .style("fill", "#fff")
                .style("stroke-width", 0)
                .style('stroke', function(d,i){  
                    return colors[d.index%colors.length];
                })  
                .style("cursor", "pointer");

Regards,

[Curran]

Hello,

You can use setInterval to execute a function periodically. The code to execute a function every second looks like this:

setInterval(function (){
  // Do stuff
}, 1000); // 1000 milliseconds = 1 second

Here's an example that updates a visualization every second with a transition: D3 4.0 Sequential Scales Explorer.

Best regards,

Curran

Datavis.tech

[Jorge Rosa]

Thanks for your answer.

One thing, how i can update the line value and this one bends in y axis? This is my line chart:

Imagine on the last straight line, this one bends up and down.

The effect is represent one bending blade(youtube.com/watch?v=I2Ajiz__ww0)

[Mike Bostock]

Using setInterval (or repeated setTimeout) is somewhat perilous because if your page gets backgrounded for a long time, you can end up queueing thousands of transitions that then cause the page to hang when it returns to the foreground.

If you instead use d3.interval (or d3.timeout) in D3 4.0, you’ll avoid this issue: these methods do not run in the background, so new transitions are only scheduled when the page is in the foreground. More here:

https://github.com/d3/d3/blob/master/CHANGES.md#timers-d3-timer

Mike

[Jorge Rosa]

Thanks Mike.

Now how I update this data variable...

var randomNumber = Math.floor(Math.random() * 6) + 1;

data =  [
            [{'x':0,'y':0},{'x':5,'y':0},{'x':10,'y':0},{'x':15,'y':3},{'x':20,'y':7},{'x':25,'y': randomNumber}]
        ];

...and re-draw the line in chart with a smooth move?

This is my chart and i want move the pit of line - http://oi68.tinypic.com/344eebm.jpg - up and down in y axis.


Regards,