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

时间:2015-05-24 00:23:22

标签: javascript d3.js

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

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

我需要解决类似的问题。我已经组装了我使用过的代码并将其放入小提琴中。但是,我不是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计算 - 这些都在小提琴中。