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

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:

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