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

任何帮助将不胜感激！

谢谢，

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

作为一般性评论，请请输入数字而不是字符串。这样可以避免以后出现各种奇怪的行为。

d3.js行函数不迭代整个数组

1 个答案: