d3.js多軸線圖

Question

我製作了一個圖表，其中包含多個被繪製爲圓形的y軸值。我現在想用線連接每個y軸值（基本上是一個折線圖）。

我覺得我的錯誤在於我怎麼嘗試定義y軸的線值：

 var line = d3.svg.line() 
        .x(function(d) { return x(d.x); }) 
        .y(function(d) { return y(d.y1, d.y2, d.y3); }); 

這裏是我的數據集：

var dataset = [ 
     {x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 3, y3: 2}, 
     {x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 2, y3: 4}, 
     {x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 3, y3: 1}, 
     {x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 1, y3: 2}, 
     {x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 5, y3: 3}, 
     {x: now, y1: 6, y2: 4, y3: 3}, 
    ]; 

這裏是一個完整的例子我現在的圖形：http://jsbin.com/edikeg/1/edit

我讀過line（）方法的api引用，但我不確定還有什麼要嘗試。如果任何人都可以推薦最好的方法來完成這一點，以及任何額外的d3.js開始提示或初學者資源，我將不勝感激。

感謝

Answer 1

首先，你的數據集是在非最佳格式。更好的格式是爲每個線/點集創建單個對象：

var dataset = [ 
    [ 
     {x: d3.time.hour.utc.offset(now, -5), y: 1}, 
     {x: d3.time.hour.utc.offset(now, -4), y: 2}, 
     {x: d3.time.hour.utc.offset(now, -3), y: 3}, 
     {x: d3.time.hour.utc.offset(now, -2), y: 4}, 
     {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
     {x: now, y: 1} 
    ], 
    [ 
     // y2-values paired with x-values 
    ], 
    [ 
     // y3-values paired with x-values 
    ] 
];  

爲什麼，你問？因爲用d3創建對象和對象組會更容易。如果需要，也可以編寫地圖功能將當前數據轉換爲此格式。

現在，您的數據格式更簡單，創建線條和圓圈的代碼將不依賴於數據集中的項目數。退房工作，重寫的版本在這裏：

http://jsbin.com/edikeg/3/edit

的發生的事情基本解釋：

對於數據集中的每個項目，我們創建g.line，一個pathContainer保持每個路徑和每個它的圓點。

var pathContainers = svg.selectAll('g.line') 
    .data(dataset); 

    pathContainers.enter().append('g') 
    .attr('class', 'line'); 

然後，在各pathContainer，我們創建了一個path。

pathContainers.selectAll('path') 
    .data(function (d) { return [d]; }) // continues the data from the pathContainer 
    .enter().append('path') 
     .attr('d', d3.svg.line() 
     .x(function (d) { return xScale(d.x); }) 
     .y(function (d) { return yScale(d.y); }) 
     .interpolate('monotone') 
    ); 

最後，我們創建了數據集中的每個點circle每個pathContainer

pathContainers.selectAll('circle') 
    .data(function (d) { return d; }) 
    .enter().append('circle') 
    .attr('cx', function (d) { return xScale(d.x); }) 
    .attr('cy', function (d) { return yScale(d.y); }) 
    .attr('r', 5); 

希望這有助於！