如何設計這樣的酒吧？

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

因此，對於第一個和最後一個小節，我分別反轉了左側和右側的路徑運動。