d3.js線功能不遍歷整個陣列

Question

Folks-

我已經嘗試添加上的堆積條形圖的頂部上的線圖，使用相同的數據集。堆積的條形圖工作正常，但我只得到一對由該功能的折線圖部分繪製的點。

由於折線圖將使用相同的x軸，我重用了該函數的那部分。函數的「y」部分爲「數據」對象的前兩個子元素返回正確的值，但不會再繼續。

var line1 = d3.svg.line() 
    .x(function(d,i) { console.log(x(x.domain()[i])); return x(x.domain()[i])}); //34 and 92 
    .y(function(d,i) { console.log(d[i].total); return d[i].total}); //124 and -70 

然後我把它叫做：

svg.append("svg:path").attr("d", line1(data)).attr("class", "data1"); 

我已經發布了它的github：

https://gist.github.com/RCL1/6906892

任何幫助，將不勝感激！

謝謝，

RL

Answer 1

你data是兩個陣列的嵌套結構。會發生什麼是它需要第一個數組的第一個元素和第二個第二個並繪製它。由於頂層只有兩個元素，所以只繪製兩個點。

要畫出實線，只傳入data的單個元素，並相應地調整行訪問器 - 特別是，無需索引d。在繪製它們之前，您可能還想將這些值傳遞給您的y比例。

完整的代碼看起來像這樣。完成jsfiddle here。

var line1 = d3.svg.line() 
     .x(function(d,i) { return x(x.domain()[i])}) 
     .y(function(d,i) { return y(d.total); }); 

svg.append("path").attr("d", line1(data[0])).attr("class", "data1"); 

作爲一般性意見，請請將數字編號而不是字符串。這會在以後避免各種奇怪的行爲。