D3可折叠树路径标签倒置

Question

我正在使用d3创建可折叠的树。大致遵循此guide。

我正在尝试向路径添加标签。

这是我的代码，用于向路径添加标签。

  var text = this.svg.append("text")
             .append("textPath")
             .attr("text-anchor", "middle")
             .attr("xlink:href", "#blahblah")
             .text((d)=> { return d.weight; });

标签以上下颠倒的方式呈现。不确定，到底是什么问题。有什么建议么？

更新

这是我的路径代码

  let link = this.svg.selectAll('path.link')
  .data(links, function (d) {
    return d.id;
  });

// Enter any new links at the parent's previous position.
let linkEnter = link.enter().insert('path', 'g')
  .attr('class', 'link')
  .attr('id', (d) => {
    return d.id;
  })
.attr('d', (d) => {
  let o = { x: source.x0, y: source.y0 };
  return this.diagonal(o, o);
});

let linkUpdate = linkEnter.merge(link);

// Transition back to the parent element position
linkUpdate.transition()
  .duration(this.duration)
  .attr('d', (d) => {
    return this.diagonal(d, d.parent);
  });

// Remove any exiting links
let linkExit = link.exit().transition()
  .duration(this.duration)
  .attr('d', (d) => {
    let o = { x: source.x, y: source.y };
    return this.diagonal(o, o);
  })
  .remove();

 private diagonal = (s, d) => {
      let path = `M ${s.y},${s.x}
                  C ${(s.y + d.y) / 2},${s.x},
                  ${(s.y + d.y) / 2},${d.x},
                  ${d.y},${d.x}`;

      return path;
  }

Answer 1

此功能绘制链接：

private diagonal = (s, d) => {
    let path = `M ${s.y},${s.x}
                C ${(s.y + d.y) / 2},${s.x},
                ${(s.y + d.y) / 2},${d.x},
                ${d.y},${d.x}`;

    return path;
}

因此，它从第一个参数的点到第二个参数。因此，您的更新函数应交换参数：

linkUpdate.transition()
  .duration(this.duration)
  .attr('d', (d) => {
    return this.diagonal(d.parent, d);
  });