javascript - 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);
  });