D3js - 创建和轻松更新多折线图 [英] D3js - Creating and easily updating a multi-line chart

问题描述

我使用 D3 创建了一个小测试折线图，但由于我对库很陌生，我不确定在图表中添加多条线的最佳方法是什么，目前我只有一条线显示在这个 fiddle 中.

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.

我想在图表上显示 2 行，但我不确定如何在不复制粘贴代码的情况下实现这一点，我确信这会非常低效，因为我想定期更新/动画图表基于关于用户选择.

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.

取而代之的是

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

我想显示这样的东西，

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?

注意:我只是想学习和熟悉 D3 最佳实践和整个库.谢谢.

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

推荐答案

这是可能的，也是合理的.有一个教程可以解决这个问题D3 嵌套选择教程它描述了数据的嵌套.

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.

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

var width = 625,
    height = 350;

var x = d3.scale.linear()
    .domain([0,data[0].length])   // Hack. Computing x-domain from 1st array
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0,d3.max(data[0])])  // Hack. Computing y-domain from 1st array
    .range([height, 0]);

var line = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return y(d); });

var area = d3.svg.area()
    .x(line.x())
    .y1(line.y())
    .y0(y(0));

var svg = d3.select("body").append("svg")
    //.datum(data)
    .attr("width", width)
    .attr("height", height)
  //.append("g");

var lines = svg.selectAll( "g" )
  .data( data );  // The data here is two arrays

// for each array, create a 'g' line container
var aLineContainer = lines
  .enter().append("g");  

/*svg.append("path")
    .attr("class", "area")
    .attr("d", area);*/

aLineContainer.append("path")
    .attr("class", "area")
    .attr("d", area);

/*svg.append("path")
    .attr("class", "line")
    .attr("d", line);*/

aLineContainer.append("path")
    .attr("class", "line")
    .attr("d", line);

/*svg.selectAll(".dot")
    .data(data)
  .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);*/
// Access the nested data, which are values within the array here
aLineContainer.selectAll(".dot")
  .data( function( d, i ) { return d; } )  // This is the nested data call
  .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);
​

一个缺陷是我计算了第一个数组的 x 和 y 轴的域，这是一个技巧，但与您的问题不完全相关.

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 - 创建和轻松更新多折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！