我该如何为条形样式? [英] 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:

代码:

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);

推荐答案

这就是您想要的: 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.

这篇关于我该如何为条形样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！