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

所以我试图改变我的小提琴{143}的第143行：

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

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

所以我尝试了这个：

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

因为使用“d.key”显示单独的“symbol”-value。但是知道我在控制台中遇到了这个错误：

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

但没有成功。

我尝试了很多其他已发布的“解决方案”，而不是我在网上找到的其他一些“解决方案”，但都没有再次成功。

任何人都可以给我一个如何解决这个问题的提示吗？

再次提起小提琴：

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

Answer 1

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

我会看看我是否可以正确修复，因为显然这不是理想的行为。

<强>更新

看起来问题是，当您显示您的点时，您不会更新您的域，因此他们正在使用已设置的最后一个域（因此为什么只能正常显示）。此外，您在每个图表上显示整个数据集的点（尽管大多数都在域外）。

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

<强>概要

我想到了几个解决方案：

每个图表设置单独的轴/域。
将每个符号放入g元素，然后通过嵌套选择向其中添加数据。

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

D3将点添加到多个堆叠折线图

1 个答案: