正确填充 D3 创建的增强 svg 路径

Correctly filling augmented svg path created by D3

本文关键字：增强 svg 路径 创建 填充 D3      更新时间：2023-09-26

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

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");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
</svg>
如果我现在填充创建的路径（例如将填充从"无"更改为"紫色"），我会得到不希望的结果：

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

形状未被识别为一个形状，因此未正确填充。（顺便说一下：当仅使用一个样条曲线和一个线性插值零件时，它有效。解决这个问题的一种可能性是删除 D3 插入的不规则移动命令。但是，我不敢相信，这是唯一的解决方案。必须有一个更简单、更清洁的解决方案。可能我误解了如何使用 D3。谁能给我一个线索？

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

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

你不能只是把路径连接在一起。 每个命令都以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>

相关文章：