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"); 

作为一般性意见，请请将数字编号而不是字符串。这会在以后避免各种奇怪的行为。