Question

我想使用D3来创建增强的svg-pathes并填充它们。增广的pathes是pathes，包含使用不同插值方法的多个部分。看看下面的例子（执行代码来查看svg）：

＆＃13;

p1 = [
  [10,10],
  [10,190],
  [190,190]
];

p2 = [
  [190,190],
  [50,50],
  [190,20]
];

p3 = [
  [190,20],
  [190, 10]
];

p4 = [
  [190,10],
  [100,20],
  [10,10]
];

  var svg = d3.select('svg')
              .attr("width", 200)
              .attr("height", 200)
              .attr("viewBox", "0 0 200 200");

  var line = d3.svg.line().interpolate("linear");
  var spline = d3.svg.line().interpolate("basis");
  
    svg.append("path")
     .attr("d", function(){
       return line(p1)  + spline(p2) + line(p3) + spline(p4)
     })
     .attr("fill", "none")
     .attr("stroke-width", 1)
     .attr("stroke", "black");

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
</svg>

＆＃13;

＆＃13; 如果我现在填充创建的路径（例如，更改＃34;没有＆＃34;到＆＃34;紫色＆＃34;例如），我得到了一个不希望的结果：

＆＃13;

<svg viewBox="0 0 200 200" height="190" width="190">
<path stroke="black" stroke-width="1" fill="purple" d="M10,10L10,190L190,190M190,190L166.66666666666666,166.66666666666666C143.33333333333331,143.33333333333331,96.66666666666666,96.66666666666666,96.66666666666666,68.33333333333333C96.66666666666666,39.99999999999999,143.33333333333331,29.999999999999996,166.66666666666666,24.999999999999996L190,20M190,20L190,10M190,10L174.99999999999997,11.666666666666664C160,13.333333333333332,130,16.666666666666664,99.99999999999999,16.666666666666664C69.99999999999999,16.666666666666664,39.99999999999999,13.333333333333332,24.999999999999996,11.666666666666666L10,10"></path></svg>

＆＃13;

形状未被识别为一个形状，因此未正确填充。（顺便说一下：它只使用一个样条曲线而且只有一个线性插补部分。）解决这个问题的一种可能性是删除D3插入的无法运动命令。但是，我无法相信，这是唯一的解决方案。必须有一个更简单，更清洁的解决方案。可能我误解了如何使用D3。谁能给我一个线索？

编辑：我希望填充的形状看起来像：

＆＃13;

<svg viewBox="0 0 200 200" height="190" width="190">
<path stroke="black" stroke-width="1" fill="purple"
d="M10,10L10,190L190,190L166.66666666666666,166.66666666666666C143.33333333333331,143.33333333333331,96.66666666666666,96.66666666666666,96.66666666666666,68.33333333333333C96.66666666666666,39.99999999999999,143.33333333333331,29.999999999999996,166.66666666666666,24.999999999999996L190,20L190,10L174.99999999999997,11.666666666666664C160,13.333333333333332,130,16.666666666666664,99.99999999999999,16.666666666666664C69.99999999999999,16.666666666666664,39.99999999999999,13.333333333333332,24.999999999999996,11.666666666666666L10,10"></path></svg>

＆＃13;

Answer 1

您不能只将这些路径连接在一起。每个都以move to命令（M10,10或类似的命令）开头。这将产生一个无法正确填充的“开放”路径。简单的解决方法是，除了第一条路径之外，只删除move to命令：

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>

<body>
  <svg>
  </svg>
  <script>
    p1 = [
      [10, 10],
      [10, 190],
      [190, 190]
    ];

    p2 = [
      [190, 190],
      [50, 50],
      [190, 20]
    ];

    p3 = [
      [190, 20],
      [190, 10]
    ];

    p4 = [
      [190, 10],
      [100, 20],
      [10, 10]
    ];

    var svg = d3.select('svg')
      .attr("width", 200)
      .attr("height", 200)
      .attr("viewBox", "0 0 200 200");

    var line = d3.svg.line().interpolate("linear");
    var spline = d3.svg.line().interpolate("basis");

    svg.append("path")
      .attr("d", function() {

        var s1 = line(p1),
            s2 = spline(p2),
            s3 = line(p3),
            s4 = spline(p4);
            
        s2 = s2.substring(s2.indexOf("L"), s2.length);
        s3 = s3.substring(s3.indexOf("L"), s3.length);
        s4 = s4.substring(s4.indexOf("L"), s4.length);  

        return s1 + s2 + s3 + s4;
      })
      .attr("fill", "purple")
      .attr("stroke-width", 1)
      .attr("stroke", "black")
  </script>
</body>

</html>

正确填充D3

1 个答案: