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

【问题标题】：d3.js Radar Graph - filling in between linesd3.js 雷达图 - 填充线条之间
【发布时间】：2012-07-02 20:32:12
【问题描述】：

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

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

最终结果

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

这是一个很大的帮助，但是我被困在一个部分。我附上了我更新的雷达图。我的问题是我正在尝试创建一个有轮廓但没有填充的图层。相反，我以某种方式得到了两层有轮廓，而只有一层没有。我还添加了尝试完成此操作的代码。非常感谢。
谢谢迈克。次要注意，在the code you linked 中，line 的声明未使用，可以删除，从而使示例更加简单。

【解决方案2】：

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

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

【讨论】：

您能否详细说明如何使用自定义路径生成器？谢谢
您可以在the wiki 上找到有关路径生成器的更多信息（“路径数据生成器”部分）。对于实现，只需看一下源代码。
我已经实现了一个自定义生成器here，函数varLine。
从您的源代码看来，您用于创建此自定义路径的代码如下：这是正确的吗？ svg.append("svg:line") .attr("y1", y(0)) .attr("y2", y(0)) .attr("x1", x(tmin)) .attr(" x2", x(tmax)); svg.append("svg:line") .attr("stroke-dasharray", "10 10") .attr("y1", y(-3)) .attr("y2", y(-3)) .attr("x1", x(tmin)) .attr("x2", x(tmax));
不，路径是在varline(points) 函数中生成的（作为“M ...”形式的SVG路径，请参见另一个答案）。该函数获取一个点列表并计算每个点的坐标。抱歉，该功能不是特别容易理解，但我没有更简单的示例。正如我之前所说，查看d3.svg.line 的源代码可能会更容易理解。

【解决方案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/ 的条形图路径上使用，如果您想了解这种技术的实际应用。

【讨论】：