javascript - 如何用点系列替换图表中的线？

Question

我正在尝试使用 'Reusable Charts' approach @mbostock 描述，使用一行 ( <path> ) 时一切都很好。 但是，当我尝试使用点 ( <circle> ) 时，图表中只添加了一个元素，而且格式不正确(错误的 cx 和 cy )。

我尝试的代码在 lines 50-55 of the fiddle 之间.

Answer 1

在利用可重用图表 API 方面做得很好!

为了使用圆圈，数据也需要绑定(bind)到圆圈集合。您可以通过多种方式查看selections了解更多信息(搜索数组的数组以获得棘手的一点，它可以让您了解如何以不同的方式进行操作)。

http://jsfiddle.net/7rdU7/

以上是对您的示例所做的修复，使其简单易懂，易于理解差异。

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 example 的来源看看如何创建多个不同的条形图，但我真的不知道这是否是使用它的理想方式。