d3.js雷达图 - 在线之间填充

Question

我正在尝试在这些三角形中的两个之间创建填充，例如红色和绿色三角形之间的红色填充。有人知道怎么做到这一点吗？我已经看到了雷达图的另一个例子，我认为它做了类似的事情，虽然我认为他们使用CSS创建填充，而不是d3 ......

使用径向图表解决了mbostock答案的上述问题...

最终结果

Answer 1

您无需为此实现自定义路径;您可以使用d3.svg.area.radial路径生成器。以下是可用于绘制循环数据的堆叠径向区域图表示例：

• http://bl.ocks.org/3048740

该实施与雷达图非常相似，除了雷达图表，每个角点的比例都不同。

Answer 2

要实现此目的，您必须使用自定义路径生成器将两个三角形合并为一个路径。然后你可以关闭路径并填充它。请注意，如果您希望三角形具有不同的颜色，则需要单独绘制它们。

您可以尝试作弊并简单地填充较大的三角形，然后将较小的三角形放在上面。然后绘制网格线。但这只适用于三角形不重叠的情况。

Answer 3

正如Lars所说，你想创建一个SVG Path element。

路径由元素的 d 属性中的一系列命令定义。您想首先将绝对（“M”）移动到两个三角形之一的一角。然后你会想要使用lineto（绝对“L”或相对“l”）来到第一个三角形的每个角落。然后绝对移动到另一个三角形，然后重复。最后的“z”关闭了路径。将路径上的填充设置为所需的颜色。

以上是单个三角形的上述链接的示例路径：

<path d="M 100 100 L 300 100 L 200 300 z"/>

mbostock在http://square.github.com/crossfilter/的条形图的路径上使用，如果你想看看这种技术的运作。