d3.js Radar Graph - filling in between lines

Question

I\'m trying to create a fill in between two of these triangles, for example a red fill in between the red and green triangles. Does anybody know how to accomplish this? I have s

Answer 1

To achieve this, you'll have to merge the two triangles into one path by using a custom path generator. Then you can close the path and fill it. Note that if you want the triangles to have different colours, you need to draw them separately.

You could try to cheat and simply fill the bigger triangle and then put the smaller triangle with a white fill on top of it. Then draw the grid lines. This will only work however if the triangles don't overlap.

Answer 2

You don’t need to implement a custom path for this; you can use a d3.svg.area.radial path generator. Here’s an example of a stacked radial area chart which you might use to plot cyclical data:

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

The implementation is fairly similar to a radar chart, except with a radar chart the scales will be different for each angular point.

Answer 3

As Lars mentioned, you want to create an SVG Path element.

Paths are defined by a series of commands in the d attribute on the element. You want to start by moving absolutely ("M") to one corner of one of the two triangles. Then you'll want to use the lineto ("L" absolutely, or "l" relatively) to go to each corner of the first triangle. Then move absolutely to the other triangle, and repeat. The "z" at the end closes the path. Set the fill on the path to the desired color.

Here's an example path from the link above for a single triangle:

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

mbostock uses on paths for the bar charts at http://square.github.com/crossfilter/ if you want to look at this technique in action.