将多个路径合并为一个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);

在这里完成演示.我还修复了路径中的错误(减号和数字之间的空格).