我如何设计这样的条形图？

Question

截至目前，我的背景栏的样式为like this。

如何使用微小的白色条纹更改它，使其看起来像这样：

代码：

defs = svg.append('svg:defs');

defs
.append('svg:pattern')
.attr('id', 'stripe_bg')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', '8')
.attr('height', '8')
.append('svg:image')
.attr('xlink:href', 'http://snag.gy/vLMrD.jpg')
.attr('x', 0)
.attr('y', 0)
.attr('width', 8)
.attr('height', 8);

Answer 1

这是你想要的：http://jsfiddle.net/NNgaT/

改变在于路径的生成方式：

.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(" ");
}

所以对于第一个和最后一个条，我分别颠倒了左右两侧的路径移动。