D3js - Creating and easily updating a multi-line chart

问题:

I've created a little test line chart using D3, but since I am quite new to the library I am not sure what the best way would be to add multiple lines to a chart, at the moment I only have one line displayed in this fiddle.

I would like to display 2 lines on the chart, but I am unsure of how to achieve that without copy pasting code, which I am sure would be very inefficient as I would like to update/animate the graph at regular intervals based on user selection.

Instead of this,

var data = [12345,22345,32345,42345,52345,62345,72345,82345,92345,102345,112345,122345,132345,142345]; 

I would like to display something like this,

var data = [             [12345,42345,3234,22345,72345,62345,32345,92345,52345,22345], // line one             [1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] // line two           ]; 

Would this be a possibility? If so, what would be the best way to approach this, so that I can easily update/animate the graph when needed?

Note: I am merely trying to learn and to familiarize myself with D3 best practices and the library as a whole. Thanks.

回答1:

This is possible and reasonable. There is a tutorial that approaches this at the D3 Nested Selection Tutorial which describes nesting of data.

Below is code that I hacked from your fiddle to demonstrate this.

One deficiency is that I computed the domain for the x and y axes off the first array, which is a hack, but not pertinent to your question exactly.

文章来源: D3js - Creating and easily updating a multi-line chart