How Do I Style The Bars Like This?

As of now, I have the background bars styled like this. How do I change it so as to look like this, with the tiny white stripes: Code: defs = svg.append('svg:defs'); defs .append

Solution 1:

Is this what you want: http://jsfiddle.net/NNgaT/

The change was in how the path is being generated:

.attr('d', function (d, i) {
    // ...     
    return [ "M", [ (xPos - ((i === 0) ? -1 : 1 ) * flareRadius), height],
           // ...
            [(xPos + barWidth + ((i === data.length - 1) ? -1 : 1) * flareRadius), height],
            "Z"
           ].join(" ");
}

So for the first and last bars, I have inverted the movement of the path on the left and right side respectively.