将多条路径合并为一个 D3(SVG)

Question

谁能解释我如何将一组路径中的多个路径合并为一个路径。所有路径都是绝对的（大写字母）。

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 ?

是否可以使用 .each 语句遍历元素并将所有元素相加？ 我设置了一个小提琴来展示我的问题。 http://jsfiddle.net/5Td4Q/3/

Answer 1

是的，您可以将路径字符串与绝对坐标连接起来：

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

完整演示 here。我还修复了路径中的错误（减号和数字之间的空格）。