d3.js雷達圖-在行之間填寫

Question

我試圖在兩個三角形之間創建一個填充，例如在紅色和綠色三角形之間創建一個紅色填充。 有人知道怎么做到這一點嗎？ 我看過雷達圖的另一個示例，盡管我認為他們使用CSS而不是d3創建填充，但我相信它也做了類似的事情。

使用徑向圖解決了mbostock的答案的上述問題...

最后結果

Answer 1

您不需要為此實現自定義路徑； 您可以使用d3.svg.area.radial路徑生成器。 這是一個堆積的徑向面積圖的示例，可用於繪制周期性數據：

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

該實現與雷達圖非常相似，不同之處在於使用雷達圖時，每個角點的比例都不同。

Answer 2

為此，您必須使用自定義路徑生成器將兩個三角形合並為一條路徑。 然后，您可以關閉路徑並填充它。 請注意，如果希望三角形具有不同的顏色，則需要分別繪制它們。

您可以嘗試作弊並簡單地填充較大的三角形，然后在較小的三角形上添加白色填充。 然后繪制網格線。 但是，這僅在三角形不重疊的情況下有效。

Answer 3

如Lars所述，您想創建一個SVG Path元素 。

路徑由元素上d屬性中的一系列命令定義。 您想從絕對（“ M”）移動到兩個三角形之一的一個角開始。 然后，您將需要使用lineto（絕對為“ L”或相對為“ l”）轉到第一個三角形的每個角。 然后絕對移動到另一個三角形，然后重復。 末尾的“ z”關閉路徑。 將路徑上的填充設置為所需的顏色。

這是上面鏈接中單個三角形的示例路徑：

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

如果您想了解這種技術，mbostock可以在http://square.github.com/crossfilter/上使用條形圖的路徑。