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