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

Question

我正在尝试使用@mbostock描述的'Reusable Charts' approach，使用一行（<path>）时一切正常。 但是，当我尝试使用点（<circle>）时，只有一个元素被添加到图表中并且格式不正确（错误cx和cy）。

我尝试的代码介于lines 50-55 of the fiddle之间。

Answer 1

利用可重复使用的图表API做了很多工作！

为了使用圆圈，数据也需要绑定到圆圈集合。您可以通过多种方式查看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的来源，看看如何创建几个不同的条形图，虽然我真的不知道这是否是理想的方式与之合作。

Answer 2

不改变路径，而是改变路径的绘制方式。

演示：http://jsfiddle.net/2DDuH/5/

.line {
  fill: none;
  stroke: #000;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-dasharray:0 20
}

通过使用较胖的笔划，圆形线条和虚线“0”绘制0px后跟间隙，您的路径会被一系列圆圈描边。您的stroke-width会控制圈子的直径。

如果需要，您可以提供任意复杂的dasharray以使它们不均匀地间隔开。例如，尝试0 20 0 40 0 6 0 30 0 15 0 30。