D3将点添加到多个堆积的折线图中

我的姐妹

我正在创建多个折线图,这些折线图由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文件中包含的每个符号,都会绘制一个单独的图形。到目前为止,一切都很好。

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

这是创建点的部分(我的小提琴中的第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,输出中,我发现了这一部分:

// 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”显示了单独的“ symbol”值。但是知道我在控制台中收到此错误:

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. 将您的点放入每个符号的ag元素中,然后通过嵌套选择将数据添加到它们中。

可行,但是您确实应该多读一些(嵌套的)选择。理想情况下,您可能希望单独生成每个图,而超出其他图的范围。这个解决方案的设计很糟糕,但是希望它可以帮助您了解代码的工作方式。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在D3折线图中自定义色阶?

来自分类Dev

如何将字符串值添加到nvd3折线图x轴值?

来自分类Dev

如何使用Chart.js将点击事件添加到我的折线图中

来自分类Dev

似乎无法弄清楚如何使用HoloGraphLibrary动态地将点添加到折线图中。

来自分类Dev

在d3中将轴添加到动态折线图中

来自分类Dev

如何创建堆积的折线图D3,多个Y轴和公共X轴

来自分类Dev

D3:如何在折线图中显示孤点

来自分类Dev

如何将圆添加到折线图路径d3.js

来自分类Dev

使用ggplot将图例添加到单个折线图中

来自分类Dev

将点添加到d3 SVG贴图

来自分类Dev

将列的平均值添加为折线图中的点

来自分类Dev

使用Python PPTX将数据表添加到折线图中

来自分类Dev

使用ggplot2将标签添加到折线图中

来自分类Dev

将网格添加到D3.js折线图

来自分类Dev

如何在D3折线图中添加交互式功能(折线和标签)?

来自分类Dev

将日期标签添加到HighCharts折线图中

来自分类Dev

似乎无法弄清楚如何使用HoloGraphLibrary动态地将点添加到折线图中。

来自分类Dev

在d3中将轴添加到动态折线图中

来自分类Dev

将“事件”添加到时间序列折线图(垂直折线或xy散点图)

来自分类Dev

如何将类添加到折线图中的每一行

来自分类Dev

无法在D3条形图/折线图中显示折线

来自分类Dev

D3如何找到折线图中最后一个点的高度

来自分类Dev

D3:如何在折线图中显示孤点

来自分类Dev

D3 –折线图问题

来自分类Dev

d3累积折线图

来自分类Dev

在d3(v4)折线图中动态添加/删除线

来自分类Dev

如何使用ggplot将阴影区域添加到具有多条线的折线图中?

来自分类Dev

在 d3 中,如何将样式应用到折线图的折线图和折线图下方的区域?

来自分类Dev

将 SVG 线元素添加到折线图

Related 相关文章

  1. 1

    如何在D3折线图中自定义色阶?

  2. 2

    如何将字符串值添加到nvd3折线图x轴值?

  3. 3

    如何使用Chart.js将点击事件添加到我的折线图中

  4. 4

    似乎无法弄清楚如何使用HoloGraphLibrary动态地将点添加到折线图中。

  5. 5

    在d3中将轴添加到动态折线图中

  6. 6

    如何创建堆积的折线图D3,多个Y轴和公共X轴

  7. 7

    D3:如何在折线图中显示孤点

  8. 8

    如何将圆添加到折线图路径d3.js

  9. 9

    使用ggplot将图例添加到单个折线图中

  10. 10

    将点添加到d3 SVG贴图

  11. 11

    将列的平均值添加为折线图中的点

  12. 12

    使用Python PPTX将数据表添加到折线图中

  13. 13

    使用ggplot2将标签添加到折线图中

  14. 14

    将网格添加到D3.js折线图

  15. 15

    如何在D3折线图中添加交互式功能(折线和标签)?

  16. 16

    将日期标签添加到HighCharts折线图中

  17. 17

    似乎无法弄清楚如何使用HoloGraphLibrary动态地将点添加到折线图中。

  18. 18

    在d3中将轴添加到动态折线图中

  19. 19

    将“事件”添加到时间序列折线图(垂直折线或xy散点图)

  20. 20

    如何将类添加到折线图中的每一行

  21. 21

    无法在D3条形图/折线图中显示折线

  22. 22

    D3如何找到折线图中最后一个点的高度

  23. 23

    D3:如何在折线图中显示孤点

  24. 24

    D3 –折线图问题

  25. 25

    d3累积折线图

  26. 26

    在d3(v4)折线图中动态添加/删除线

  27. 27

    如何使用ggplot将阴影区域添加到具有多条线的折线图中?

  28. 28

    在 d3 中,如何将样式应用到折线图的折线图和折线图下方的区域?

  29. 29

    将 SVG 线元素添加到折线图

热门标签

归档