Merging multiple paths into one D3(SVG)

问题:

Could someone explain me how to merge multiple paths from a group into one single path.All paths are absolute (capital letters).

pathGroup.append("path")
.attr("d", "M25, 60 C100, 0 25, -10 25, 15 C25, -10 - 50, 0 25, 60 Z")

pathGroup.append("path")
.attr("d", "M55, 60 C100, 0 15, -10 25, 45 C25, -10 - 50, 0 100, 60 Z")

 pathGroup.append("path")
.attr("d", "M100, 60 C44, 0 15, -10 25, 45 C25, -10 - 50, 0 100, 60 Z")

 //pathGroup.each create a single path ?

Is it possible to iterate through the element with an .each statement and sum all of them ? I have set a fiddle to show my question. http://jsfiddle.net/5Td4Q/3/

回答1:

Yes, you can just concatenate the path strings with absolute coordinates:

var combinedD = "";
pathGroup.selectAll("path")
  .each(function() { combinedD += d3.select(this).attr("d"); });
parent.append("path")
  .attr("d", combinedD);

Complete demo here. I've also fixed the errors in your paths (space between minus sign and number).