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計算 - 這些都在小提琴中。