How do I Animate line in d3.js

Page 1 of 1

3 Replies - 353 Views - Last Post: 20 December 2012 - 09:08 AM Rate Topic: -----

#1 Andy_777888  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 20-December 12

How do I Animate line in d3.js

Posted 20 December 2012 - 06:40 AM

So my line extends from one side of my graph to the other, but it doesnt really animate through each data point, I assume I have to add a loop somewhere.

Heres the relevant code. Any assistance would be hugely appreciated!!!

//assign start coordinates for each piece of data   
var startValueline = d3.svg.line()
    .x(0)
    .y(0);

//assigns coordinates for each piece of data    
var valueline = d3.svg.line()
    .interpolate("interpolation")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

// csv callback function
d3.csv("myData2.csv", function(data) {
    data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;});


//CLIKC FUNCTION WHICH SHOULD ANIMATE LINE      
button.on("click", function() { 
    svg.append("path")                     // Add the valueline path. 
        .attr("class", "line")
        .attr("d", startValueline(data)) // set starting position
      .transition()
        .duration(2000)
        .ease("linear")
        .attr("d", valueline(data));    // set end position;
});



//myData.csv STORED IN A SEPERATE .CSV FILE
myData.csv
date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98

Is This A Good Question/Topic? 0
  • +

Replies To: How do I Animate line in d3.js

#2 sepp2k  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2087
  • View blog
  • Posts: 3,175
  • Joined: 21-June 11

Re: How do I Animate line in d3.js

Posted 20 December 2012 - 08:34 AM

When posting in the "Other Languages" forum, you should mention which language you're using. Since you're using the d3.js library, which is a Javascript library, and your code doesn't look like CoffeeScript, ClojureScript or TypeScript (or any other language that I know of, besides Javascript, that can use Javascript libraries), I'm guessing that you're using Javascript. So this should have probably been posted in the Javascript forum.
Was This Post Helpful? 0
  • +
  • -

#3 Andy_777888  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 20-December 12

Re: How do I Animate line in d3.js

Posted 20 December 2012 - 09:02 AM

I moved it.

Thanks.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 8915
  • View blog
  • Posts: 33,427
  • Joined: 12-June 08

Re: How do I Animate line in d3.js

Posted 20 December 2012 - 09:08 AM

Let's not open duplicate threads.

Use the 'report button' and a mod can move it for you versus opening a second. Closing this one.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1