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

我想使用 D3 创建增强的 svg 路径并填充它们。增强路径是包含使用不同插值方法的多个部分的路径。看一下下面的示例(执行代码以查看 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>

关于javascript - 正确填充 D3 创建的增强 svg 路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35659311/

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

上一篇：javascript - 从 json 字符串中提取数据元素

下一篇：javascript - 为什么使用JavaScript提交表单时，表单中没有提交输入和提交按钮？