StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The example you picked as a starting point is binding the data for each ticker symbol to a <code><g></code> element, and then within each of those it's creating lines, etc. based on child data of that ticker. The <code>.selectAll</code> and <code>.data</code> methods are used when you're binding a list of data to a list of DOM nodes (e.g. <code><circle></code>, <code><rect></code>, <code><g></code>). But <code><path></code> is just a single DOM node with a long string of path data for rendering the line. You call the line function once to give you that string.</p> <p>So for your purpose, if you just have one line that you're trying to animate, you just call your line function directly in order to create the path string to set on that node. There is no existing data bound to the node that you're trying to reuse. In your draw function:</p> <pre><code>.attr("d", line(array.measures.slice(0,k+1))) </code></pre> <p>Your line function itself needs slight adjustment too, assuming that array.measures contains a simple array of numbers:</p> <pre><code> var line = d3.svg.line() .interpolate('linear') .x(function(d,i) {return x(i);}) .y(function(d,i) {return y(d);}); </code></pre> <p>BUT, having said all that, I think you would be better served by starting from a simpler example such as <a href="http://bl.ocks.org/duopixel/4063326" rel="nofollow noreferrer">http://bl.ocks.org/duopixel/4063326</a> or one of the other approaches listed in <a href="https://stackoverflow.com/questions/13353665/cant-make-paths-draw-slowly-with-d3">this question</a> or <a href="https://stackoverflow.com/questions/13955790/animate-lines-in-a-line-graph-with-d3-js">this question</a>. It's hard to separate just the animated line portion of your original example from the rest of the cool stuff it's doing.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload