SVGストライプパターンをd3に変換

Question

私はd3で構築しているチャートがあります。私はスポットにストライプバーを入れたいと思います。私は、SVGで働くバーのテストバージョンがあります：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"> 
    <defs> 
     <pattern id="diagonalStripes" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> 
     <rect x="0" y="0" width="2" height="15" style="stroke:none; fill:purple;" /> 
     <rect x="2" y="0" width="2" height="15" style="stroke:none; fill:green;" /> 
     <rect x="4" y="0" width="2" height="15" style="stroke:none; fill:red;" /> 
     <rect x="6" y="0" width="2" height="15" style="stroke:none; fill:yellow;" /> 
     </pattern> 
    </defs> 

    <rect x="0" y="0" width="5" height="15" style="fill:url(#diagonalStripes);"></rect> 
</svg> 

をしかし、私はD3にタグ間の情報を変換しようとしたときのみ、最初のバー（紫1）が現れる：

svg.append('defs') 
    .append('pattern') 
    .attr('id', 'diagonalStripes') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('patternTransform', 'rotate(45)') 
    .attr('width', 8) 
    .attr('height', 8) 
    .append('rect') 
    .attr("x",0) 
    .attr("y",0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style',"stroke:none; fill:purple;") 
    .append('rect') 
    .attr("x",2) 
    .attr("y",0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style',"stroke:none; fill:yellow;") 
    .append('rect') 
    .attr("x",4) 
    .attr("y",0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style',"stroke:none; fill:red;") 
    .append('rect') 
    .attr("x",6) 
    .attr("y",0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style',"stroke:none; fill:green;"); 

svg.append("rect") 
    .attr("x", 10) 
    .attr("width", 10) 
    .attr("height", 10) 
    .attr('fill', 'url(#diagonalStripes)') 

明らかに、d3は単一のパターンに複数の矩形を追加することはできませんが、私が期待するストライプのバーを得るために、最初のセクションを正しくフォーマットする必要がありますか？代わりにやっての

Answer 1

：

svg.append('defs') 
    .append('pattern') 
    .attr('id', 'diagonalStripes') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('patternTransform', 'rotate(45)') 
    .attr('width', 8) 
    .attr('height', 8) 
    .append('rect') 
    .attr("x",0) 
    .attr("y",0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style',"stroke:none; fill:purple;") 
    .append('rect') 
    .attr("x",2) 
    .attr("y",0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style',"stroke:none; fill:yellow;") 
    .append('rect') 
    .attr("x",4) 
    .attr("y",0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style',"stroke:none; fill:red;") 
    .append('rect') 
    .attr("x",6) 
    .attr("y",0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style',"stroke:none; fill:green;"); 

はそれをこのように実行します。

var defs = svg.append('defs') 
    .append('pattern') 
    .attr('id', 'diagonalStripes') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('patternTransform', 'rotate(45)') 
    .attr('width', 8) 
    .attr('height', 8); 
//to def add rect. 
defs 
    .append('rect') 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style', "stroke:none; fill:purple;"); 
defs 
    .append('rect') 
    .attr("x", 2) 
    .attr("y", 0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style', "stroke:none; fill:yellow;"); 


defs 
    .append('rect') 
    .attr("x", 4) 
    .attr("y", 0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style', "stroke:none; fill:red;"); 

defs.append('rect') 
    .attr("x", 6) 
    .attr("y", 0) 
    .attr('width', 2) 
    .attr('height', 15) 
    .attr('style', "stroke:none; fill:green;"); 

作業コードhere

あなたのアプローチの問題点は、別の矩形内の矩形DOMを追加しているということです。 最初にパターンを作成した後、DOM内にrect DOMを追加します。後で最初に作成したrect DOM内に次のrect DOMを追加します。