Question

我是D3的初学者，想创建一个折线图。如果我的数据在3个独立的数组中，我将如何这样做呢？

我的数据将是这样的，除了365个值：

var dates = [“2013-07-11T00：00：00”，“2013-07-12T00：00：00”，“2013-07-15T00：00：00”， “2013-07-16T00：00：00”，“2013-07-17T00：00：00”，“2013-07-18T00：00：00”;

var positions = [0,0.004,0.008,0.012,0.016,0.02];

var prices = [61.041,60.93,61.063,61.456,61.473,61.68];

这些位置是使图表更容易的日期的百分比估计值。位置将是x值，价格将是y值。然后，我想让x轴显示反映日期的刻度线（可能解析日期数组）。

我在网上找到了一个教程，但它是用于绘制圆圈的，所以我不知道从哪里开始。

这是教程： http://www.jeromecukier.net/blog/2012/05/28/manipulating-data-like-a-boss-with-d3/

提前感谢您的帮助！

Answer 1

如果索引在数组中都是一致的，则可以使用map从所有数组中创建单个数组：

var newArray = dates.map(function(d, i){
  return { 'date' : d, 'position' : positions[i], 'price' : prices[i] };
};

然后，您可以使用该数组创建图表。

您还可以使用第一个数组作为数据，然后从d3函数中按位置引用其他数据，这些函数同时采用{{1}}（数据点）和d（索引））作为输入。

例如，在行生成器中，您可以说：

在此示例中，var line = d3.svg.line() .x(function(d, i) { return x(positions[i]); }) .y(function(d, i) { return y(prices[i]); });和x将是您为y和positions轴定义的比例。这种方法会导致代码比第一种方式稍微麻烦，而众所周知，梅西没有赢得世界杯。

Answer 2

您可以使用循环将多个数组转换为一个对象数组，如下所示：

var data = [{date: "2013-07-11T00:00:00", position: 0, prices: 61.041}, ...]

然后将数据数组绑定到svg路径。

此外，您可能不需要positions.使用d3 time scale可以轻松处理所有这些。

在D3中使用独立数组中的数据创建折线图？

2 个答案: