將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只有第一條（紫色的）最多顯示：

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等。