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。

将SVG条纹图案转换为d3

1 个答案: