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

這里的工作代碼

方法的問題是您要在另一個矩形內附加一個矩形DOM。 像首先創建一個模式，然后在該模式DOM中添加一個rect DOM一樣。 稍后，您將下一個rect DOM添加到第一個創建的rect DOM內，依此類推。