D3.js replace points in svg path

Question

I have pre-rendered curved svg paths with points looking like this

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

What I need, is a way to make all those lines straight, basically connecting first and last point directly, like that

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

I'm using D3 to modify svg elements. I've tried to read current d attribute using attr("d"), then using regex to change it to second format and set it back to node using attr("d", newPath), but it doesn't work. How can I do it?

edit: the code I've tried for replacing path points is like this:

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

And path looks like this:

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

But it doesn't change d attribute in path. I also need a way to make it in a loop (selecting works now, because I have only one path, but there will be more), probably using selectAll, but dunno how can I get attribute and then set it back with adjustments that way.

edit2: but if I do something like that:

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

it shows two paths, one curved, one straight. So the problem is to read from and set attribute d of rendered path. How to do it?

Answer 1

When I put your code into a snippet, it just updates immediately, but the new path is not a valid one.

 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>

Reason for this is that you replace everything but numbers with commas, but then there are also duplicate subsequent commas. I can split the path using regex into the MoveTo part and the Bezier Curve, and then append the final parts like this:

 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>