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

Question

我正在尝试在其中两个三角形之间创建填充，例如红色和绿色三角形之间的红色填充。有谁知道如何做到这一点？我看过另一个雷达图的例子，我相信它会做类似的事情，尽管我认为他们使用 CSS 创建填充，而不是 d3 ......

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

最后结果

Answer 1

您不需要为此实现自定义路径；您可以使用d3.svg.area.radial路径生成器。这是一个堆叠径向面积图的示例，您可以使用它来绘制周期性数据：

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

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

Answer 2

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

您可以尝试作弊并简单地填充较大的三角形，然后将带有白色填充的较小三角形放在它上面。然后绘制网格线。但是，这仅在三角形不重叠时才有效。

Answer 3

正如 Lars 所提到的，您想要创建一个SVG 路径元素。

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

这是上面链接中单个三角形的示例路径：

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

mbostock 使用http://square.github.com/crossfilter/上的条形图的路径，如果您想查看此技术的实际应用。