D3向多个堆叠折线图添加点

Question

我正在创建多个由 csv 文件中的“符号”堆叠的折线图。

这就是 csv 的样子：

symbol,date,price
Agency,2015/5/6,33
Agency,2015/5/7,29
Agency,2015/5/8,32
test,2015/5/6,23
test,2015/5/7,19
test,2015/5/8,22
example,2015/5/6,43
example,2015/5/7,49
example,2015/5/8,42

因此，对于 csv 文件中包含的每个符号，都会绘制一个单独的图表。到目前为止，这一切都很好。

但我正在努力为每一行添加点。

这是创建点的部分（my fiddle 中的第 142 - 148 行）：

var circles = svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
        .attr("r", 2)
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.price); })
        .style("fill", "black");

但此代码会创建由 最后一个“符号” 的值填充的点，该值从 csv 中取出，而不是为每个“符号”分开。

我在这里对 stackoverflow 进行了很多研究，但我发现没有一个解决方案或提示对我有用。

在这个例子中http://jsbin.com/isuris/1/edit?html,output我找到了这个部分：

// add circles
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', 3); 

所以我尝试像这样更改我的小提琴http://fiddle.jshell.net/doyL1L0p/1/ 的第 143 行：

.data(function (d) { return d; })

但这不起作用，“错误”的点消失了。

所以我尝试了这个：

.data(function (d) { return d.key; })

因为使用“d.key”会显示单独的“符号”值。但是知道我在控制台中收到了这个错误：

Unexpected value NaN for attribute cx
Unexpected value NaN for attribute cy

然后我尝试更改第 146 和 147 行：

        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.price); })

但没有成功。

我尝试了许多其他从 stackoverflow 发布的“解决方案”以及我在网络上找到的其他解决方案，但都没有再次成功。

谁能告诉我如何解决这个问题？

又是小提琴：

http://fiddle.jshell.net/doyL1L0p/1/

Answer 1

根据您对小提琴的一些编辑，似乎它们实际上正在显示......但它们超出了画布的范围。 如果您查看结果here，您会看到在所有图表上都显示了靠近顶部的新添加点。

我会看看我是否可以进行适当的修复，因为显然这不是所需的行为。

更新

看起来问题在于您在显示点时没有更新域，因此它们使用的是最后一个设置的域（因此为什么只有最后一个正常显示）。此外，您将在每个图表上显示整个数据集的点（尽管它们中的大多数都在域之外）。

我实际上建议尝试将您的数据解析为每个唯一符号的数组，这使您的事情变得更加简单。例如，您可以简单地使用d3.extent 设置域。

摘要

我想到了几个解决方案：

1. 为每个图设置单独的轴/域。

2. 将点放入每个符号的 g 元素中，然后通过嵌套选择向它们添加数据。

This 有效，但你真的应该多读一点（嵌套）选择。理想情况下，您可能希望单独生成每个图表，超出其他图表的范围。这个解决方案设计得很糟糕，但希望它可以帮助您了解代码的工作方式。