我有两个数组,一个包含应该进入X轴的数据,另一个数据应该成为Y条目。
如何告诉d3.js从这些数组中获取数据并将其用作图形的数据然后绘制它?
答案 0 :(得分:1)
你可以在D3之上使用任何东西吗?如果是,请查看http://c3js.org。 C3建立在D3之上,它使创建简单图表变得更加容易。
答案 1 :(得分:1)
我需要解决类似的问题。我已经组装了我使用过的代码并将其放入小提琴中。但是,我不是d3专家,所以虽然我可以说这有效,但它可能不是最好的方法。此外,自从我建立了这个,我发现像C3和Dimple这样的东西,如John Grese在另一个答案中所提到的那样,这些库对你来说可能更有用。
这是小提琴:
它需要两个数据阵列:
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计算 - 这些都在小提琴中。