Javascript 如何计算D3对角线路径的中心？

问：计算对角线D3路径中心的最佳方法是什么

可视化示例和原始来源：

目标：我尝试在水平D3树的路径上覆盖名为谓词的链接/关系描述文本。我想把它们放在小路的中央。有时路径是对角线曲线，有时是直线水平线

对于每个链路路径，我有一个源节点和一个目标节点，我认为我应该能够使用如下算法计算中心：

For nodes vertically above the root Node...
  xCoordinate = d.target.x - (d.target.x - d.source.x)/2
  yCoordinate = d.source.y - (d.source.y - d.target.y)/2

For nodes vertically below the root Node...
  xCoordinate = d.target.x - (d.target.x - d.source.x)/2
  yCoordinate = d.target.y - (d.target.y - d.source.y)/2

相反，这根本不起作用。我阅读了API参考，看起来对角线方法可能会有所帮助，但不清楚如何使用它

在当前代码块中，我通过向svg画布中添加一个元素，然后向元素中添加一个

var linkTextItems = vis.selectAll("g.linkText")
    .data(tree.links(nodes), function(d) { return d.target.id; })

var linkTextEnter = linkTextItems.enter().append("svg:g")
    .attr("class", "linkText")
    //.attr("id", function(d) { return d.source.id + ":" + d.target.id; })
    //.attr("predicate", function(d) { return (linksByIdHash[d.source.id + ":" + d.target.id].predicate); })
    .attr("transform", function(d) { return "translate(" + (d.target.x) + "," + (d.target.y) + ")"; });

// Add Predicate text to each link path
linkTextEnter.append("svg:foreignObject")
    .attr("width", "150")
    .attr("height", "40")
  .append("xhtml:body")
    .attr("xmlns", "http://www.w3.org/1999/xhtml")
    .html(function(d){ return "<p>" + (linksByIdHash[d.source.id + ":" + d.target.id].predicate) + "</p>"; });

但是，谓词描述符（即谓词1、谓词2等）与它们关联的每个路径的中心不对齐

---

如何将谓词文本直接定位在路径的中心？

要查找路径的中心，可以使用发布的代码并将“文本对齐”属性设置为“中心”

或：

---

其中path是包含path元素的变量

谢谢您的帮助。你的回答对我来说仍然模糊不清，我不是那么先进的编码员。我要将哪个选项传递到getCentriodselection函数中，以及我应该如何将其绑定到transform和/或translate函数中？我将使用另一个选项编辑答案，更简单

var centroid = path.centroid(d),
    cenX = centroid[0],                //coordinates x of each path
    cenY = centroid[1];                //coordinates y of each path