D3.js 替换 svg 路径中​​的点

Question

我已经预渲染了弯曲的 svg 路径，点看起来像这样

d="M 547, 699 C 547, 759 347, 236, 347, 296"

我需要的是一种使所有这些线笔直的方法，基本上直接连接第一个点和最后一个点，就像那样

d="M 547, 699, 347, 296"

我正在使用 D3 来修改 svg 元素。我尝试使用 attr("d") 读取当前 d 属性，然后使用正则表达式将其更改为第二种格式并使用 attr("d", newPath) 将其设置回节点，但它不起作用。我该怎么做？

编辑： 我尝试替换路径点的代码是这样的：

var d = d3.select(".nodes-path").attr("d");
d = d.replace(/\D/g, ",");
var dArray = d.split(",");
var newPath = "M " +
      dArray[0] +
      ", " +
      dArray[1] +
      ", " + //now I know it should be ", L " on this line
      dArray[dArray.length - 2] +
      ", " +
      dArray[dArray.length - 1];
d3.select(".nodes-path").attr("d", newPath);

路径看起来像这样：

<path d="M 547, 502 C 547, 562 347, 236, 347, 296" class="nodes-path"></path>

但它不会改变路径中的 d 属性。我还需要一种方法来使其循环（现在选择有效，因为我只有一个路径，但还会有更多），可能使用 selectAll，但不知道如何获取属性，然后通过调整将其设置回来.

edit2：但如果我这样做：

d3.select(".canvas-layer")
      .append("g")
      .append("path")
      .attr("d", "M 547, 502 L 347, 296")
      .attr("class", "nodes-path");

它显示了两条路径，一条弯曲，一条笔直。所以问题是读取并设置渲染路径的属性d。怎么做？

Answer 1

当我将您的代码放入 sn-p 时，它会立即更新，但新路径不是有效路径。

var d = d3.select(".nodes-path").attr("d");
d = d.replace(/\D/g, ",");
var dArray = d.split(",");
var newPath = "M " +
  dArray[0] +
  ", " +
  dArray[1] +
  ", " + //now I know it should be ", L " on this line
  dArray[dArray.length - 2] +
  ", " +
  dArray[dArray.length - 1];
d3.select(".nodes-path").attr("d", newPath);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg viewbox="200 200 600 600">
  <path d="M 547, 699 C 547, 759 347, 236, 347, 296" class="nodes-path"></path>
</svg>

原因是您用逗号替换了 除了数字之外的所有内容，但随后的逗号也会重复。我可以使用正则表达式将路径拆分为 MoveTo 部分和 Bezier 曲线，然后像这样附加最后的部分：

var d = d3.select(".nodes-path").attr("d");
// First, just get the start of the path in one piece
var start = d.substr(0, d.indexOf("C"));
var dArray = d.split(",");
var newPath = start +
  "L" +
  dArray[dArray.length - 2] +
  ", " +
  dArray[dArray.length - 1];
d3.select(".nodes-path").attr("d", newPath);

path {
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg viewbox="200 200 600 600">
  <path d="M 547, 699 C 547, 759 347, 236, 347, 296" class="nodes-path"></path>
</svg>