CODEWITHSUNDEEP
javascriptd3.js
venky
venky

Reputation: 21

How to auto update line transition using d3.js

How to automatically update line graph transition for the given json data,I had developed for the line graph,but i don't know how to transition or animation automatically update graph.

Th below is the json object

var data=[
                    {a: 43097, b: 1},
                    {a: 43098, b: 3},
                     {a: 43099, b: 4},
                     {a: 43100, b: 8},
                     {a: 43101, b: 5},
                     {a: 43102, b: 5},
                     {a: 43103, b: 3},
                     {a: 43104, b: 2},
                     {a: 43104, b: 5},
                     {a: 43104, b: 8},
                     {a: 43104, b: 5},
                     {a: 43104, b: 7}
                     ]

Using the above json object i am able draw a line graph by using d3.js

But, now i need to draw a line transition or animation

I tried some code to do transition but i am unable to get the transition The code is like below

setInterval(function (){
                         var s=data.shift;
                         data.push(s);
                         animation();},1000)
                              }

I didn't get the trnsition

Can any one please tell me the how to do transition

Upvotes: 1

Views: 444

Answers (1)

Nikos
Nikos

Reputation: 3297

There are some issues with your data. First, I think that your a parameter is constant for the last 5 entries, so the line would only plot the first one.

Further, the method animate() would not do anything to the line (unless you have somehow implemented it and not shown in your example). Also you need to update the axis domain, otherwise your line wouldn't be shown correctly.

I have created a JSFiddle here so please have a look. Essentially, I cleaned your data and created a setInterval method as shown here:

setInterval(
    function (){
        // Append your new data, here I just add an increment to your a
        data.push(
             {"a":Number(parseFloat(d3.max(data, function(d){return d.a}))+1),
               "b":Math.random()*10
             });
            //Redraw the line
            svg.select(".line").transition().duration(50).attr("d",line)
            //Recompute the axes domains
            x.domain(d3.extent(data, function(d) { return parseFloat(d.a); }));
            y.domain(d3.extent(data, function(d) { return parseFloat(d.b); }));
            // Redraw the axes
            svg.select('.x-axis').call(xAxis);
            svg.select('.y-axis').call(yAxis)
},1000)

Hope this helps.

Upvotes: 1

Related Questions