我正在创建多个折线图,这些折线图由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上找到许多其他发布的“解决方案”,以及在网络上找到的其他解决方案,但所有尝试都没有成功。
谁能给我一个关于如何解决这个问题的提示?
这是小提琴:
根据您对小提琴的一些编辑,似乎它们实际上已在显示中……但是它们超出了画布的范围。如果在此处查看结果,则可以看到在所有图形上都显示了靠近顶部的新添加的点。
我将查看是否可以进行适当的修复,因为显然这不是所需的行为。
更新
看起来问题在于您在显示点时没有更新域,因此它们使用的是设置的最后一个域(因此为什么通常只有最后一个显示)。此外,您将在每个图形上显示整个数据集的点(尽管大多数都在域外)。
实际上,我建议尝试将每个唯一符号的数据解析为数组,这对您来说将变得更加简单。例如,您可以使用简单地设置域d3.extent
。
概括
我想到了几种解决方案:
为每个图形设置单独的轴/域。
将您的点放入每个符号的ag元素中,然后通过嵌套选择将数据添加到它们中。
这可行,但是您确实应该多读一些(嵌套的)选择。理想情况下,您可能希望单独生成每个图,而超出其他图的范围。这个解决方案的设计很糟糕,但是希望它可以帮助您了解代码的工作方式。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句