D3.js SVG中d属性的值

Question

let tree = d3.tree().size([width, height]);
d3.json('treeData.json').get((error, data) => {

  let root = d3.hierarchy(data[0]);
  tree(root);

  chartGroup.selectAll('circle')
    .data(root.descendants())
    .enter().append('circle')
      .attr('cx',(d) => d.x)
      .attr('cy',(d) => d.y)
      .attr('r','5');
  chartGroup.selectAll('path')
    .data(root.descendants().slice(1))
    .enter().append('path')
      .attr('class', 'link')
      .attr('d',(d) => {return 'M'+d.x+','+d.y+'C'+d.x+','+(d.parent.y+d.y)/2+' '+d.parent.x+','+(d.y+d.parent.y)/2+' '+d.parent.x+','+d.parent.y;});
})

上面代码中最后一行的d属性怎么理解？为什么要这么写才能输出结点之间的曲线？C和M等分别代表了什么？

Answer 1

d是路径描述，M是Moveto，移动到，C是Curveto，表示贝塞尔曲线 参考：https://developer.mozilla.org...