如何在图表中用圆点替换线？ [英] How to replace line in chart by serie of dot?

问题描述

我尝试使用@描述的可重复使用图表方法， mbostock，一切都很好，当使用一行（< path> ）。
但是，当我尝试使用点（< circle> ）时，只有一个元素被添加到图表， $ c> cx 和 cy ）。

I'm attempting to use the 'Reusable Charts' approach described by @mbostock, everything is fine when using a line (<path>). However, when I try to use dots (<circle>), only one element is added to the chart and it's not well formed (wrong cx and cy).

我尝试的代码介于小提琴的第50-55行。

My attempted code is between lines 50-55 of the fiddle.

推荐答案

利用可重复使用的图表API进行了伟大的工作！

great work on leveraging the reusable chart API!

为了使用圆，数据需要绑定到集合圈子。您可以通过多种方式查看选择以了解更多信息（搜索数组。）

In order to work with circles, the data needs to be bound to the collection of circles as well. There are a variety of ways you can take a look at selections for more information (search for array of arrays for the tricky bit that would give you some other insight on how to do it differently).

http://jsfiddle.net/7rdU7/

上面是对您的示例的修复，保持简单，容易理解差异是什么。

Above is a fix made to your example, keeping it simple and easy to understand what the differences are.

g.selectAll('.circle').data(data).enter().append("circle")
            .attr("class", "dot")
            .attr("cx", function(d) {return xScale (d.date); })
            .attr("cy", function(d) {return yScale (d.ySpeed); })
            .attr("r", function(d) {return rScale (d.xSpeed); });

如果您要在一个可视化（线）和一组点之间转换。这是一个非常棘手的游戏，弄清楚如何创建一组不同大小的圆形，所有这些都利用 svg：path 元素。如果是这种情况，您应该查看 crossfilter示例的来源，了解如何创建几个不同的条形图，虽然我真的不知道这是否是理想的工作方式。

If you are looking to transition between one visualization (a line) to a set of points. This is where it becomes a very tricky game of figuring out how to create a set of varying sized circles all leveraging an svg:path element. If that's the case you should look at the source of the crossfilter example to see how it is done to create several varying bar charts, though I really don't know if this is the ideal way to work with it.

这篇关于如何在图表中用圆点替换线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！