D3添加点到多个堆叠线图

D3 adding dots to multiple stacked line charts

本文关键字：添加 D3      更新时间：2023-09-26

我正在创建多个线形图，这些线形图由csv文件中的"symbol"堆叠。

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文件中包含的每个符号，将绘制单独的图形。到目前为止，这一切都运行良好。

但是我很难在每条线上加上点。

这是创建圆点的部分(在我的小提琴中第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");

但是这段代码创建了由最后一个"符号"的值填充的点，而不是为每个"符号"分开。

我在这里研究了很多关于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; })

，因为单独的"symbol"-值通过使用"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/

根据你的小提琴的一些编辑，似乎他们实际上被显示…但他们在画布的范围之外。如果你看一下这里的结果，你可以看到在所有的图形中，靠近顶部的新添加的点都显示出来了。

我会看看我是否可以工作在一个适当的修复，因为显然这不是期望的行为。

看起来问题是，当你显示你的点时，你没有更新你的域，所以他们正在使用最后设置的域(因此为什么通常只显示最后一次)。此外，您在每个图上显示整个数据集的点(尽管其中大多数在域之外)。

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

我想到了几个解决方案:

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

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

这是可行的，但是您真的应该阅读更多关于(嵌套)选择的内容。理想情况下，您可能希望单独生成每个图，使其超出其他图的范围。这个解决方案设计得很糟糕，但希望它能帮助您了解代码的工作方式。

相关文章：