1

我正在尝试使用@mbostock 描述的“可重用图表”方法<path>，使用线条 ( ) 时一切都很好。但是，当我尝试使用点 ( <circle>) 时，图表中只添加了一个元素并且它的格式不正确（错误cx和cy）。

我尝试的代码在 fiddle 的第 50-55 行之间。

4

2 回答 2

2

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

为了使用圆圈，数据也需要绑定到圆圈的集合。您可以通过多种方式查看选择以获取更多信息（搜索数组数组以查找棘手的位，这将为您提供有关如何以不同方式进行操作的其他见解）。

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 示例的源代码，以了解如何创建多个不同的条形图，尽管我真的不知道这是否是使用它的理想方式。

于 2013-05-10T22:45:57.957 回答
1

与其更改路径，不如更改路径的绘制方式。

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

  使用圆圈显示线条的图形

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

通过使用较粗的笔划、圆形线帽和“绘制”为 0px 的虚线，然后有一个间隙，您的路径将被一系列圆圈描绘。你stroke-width控制你的圈子的直径。

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

于 2013-05-11T00:29:41.857 回答