d3.js - d3.js 行函数未迭代整个数组

Question

伙计们-

我一直在尝试使用相同的数据集在堆积条形图的顶部添加折线图。堆积条形图工作正常，但我只得到函数的折线图部分绘制的一对点。

由于折线图将使用相同的 x 轴，我重用了该部分功能。函数的“y”部分为“data”对象的前两个孩子返回正确的值，但它不会再进一步​​了。

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

任何帮助，将不胜感激！

谢谢，

强化学习

Answer 1

你data是两个数组的嵌套结构。发生的情况是它采用第一个数组的第一个元素和第二个数组的第二个元素并绘制它。由于顶层只有两个元素，因此只绘制了两个点。

要绘制整条线，只需传入 的单个元素data并相应地调整行访问器——特别是，不需要索引d. 您可能还想y在绘制它们之前将这些值传递给您的比例。

完整的代码看起来像这样。在这里完成 jsfiddle 。

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

作为一般性评论，请让数字数字而不是字符串。这将使您免于以后出现各种奇怪的行为。