D3.js：从数据数组开始绘制简单的折线图

Question

我有两个数组，一个包含应该进入X轴的数据，另一个数据应该成为Y条目。

如何告诉d3.js从这些数组中获取数据并将其用作图形的数据然后绘制它？

Answer 1

你可以在D3之上使用任何东西吗？如果是，请查看http://c3js.org。 C3建立在D3之上，它使创建简单图表变得更加容易。

Answer 2

我需要解决类似的问题。我已经组装了我使用过的代码并将其放入小提琴中。但是，我不是d3专家，所以虽然我可以说这有效，但它可能不是最好的方法。此外，自从我建立了这个，我发现像C3和Dimple这样的东西，如John Grese在另一个答案中所提到的那样，这些库对你来说可能更有用。

这是小提琴：

http://jsfiddle.net/cf7a4afv/

它需要两个数据阵列：

var x_data = [1,2,3,4,5,5.5,7,8,9,12]
var y_data = [1,5,4,6,4,3,5,6,7,8]

此数据可以构建一个简单的折线图，其中点（1,1），（2,5），（3,4）等被绘制为（x，y）坐标并由一条线连接。我投入了几个边框，比如x = 5.5，从x = 9跳到x = 12，表明这种方法非常灵活。

然后有两个函数可以将每个数据点转换为屏幕上的像素。这些基于图表的高度和宽度：

var x = d3.scale.linear().domain([0, d3.max(x_data)]).range([0, w])
var y = d3.scale.linear().domain([0, d3.max(y_data)]).range([h, 0])

然后这变成了一个线函数。这里的关键是y函数返回y_data数组中的数据;这就是我们如何使用两个数组来创建一个图形。

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

然后有一些SVG操作和w，h计算 - 这些都在小提琴中。