Question

问题：计算对角线D3路径的“ center ”的最佳方法是什么？

可视化示例和原始来源： http://bl.ocks.org/Guerino1/raw/ed80661daf8e5fa89b85/

目标：我正在尝试在水平D3树中的路径上叠加链接/关系描述性文本（称为“谓词”）。我想将它们放在路径的“ center ”中。有时路径是对角线曲线，有时它是一条直线水平线。

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

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参考，看起来“ diagonal（）”方法可能会有所帮助，但不清楚如何使用它。

在当前代码块中，我通过将一个元素附加到svg画布然后将a附加到元素来获取要呈现的谓词文本...

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”等）与它们所关联的每条路径的中心不对齐。

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

Answer 1

要查找路径的中心，您可以使用已发布的代码here并将text-align属性设置为center

或者：

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

path是包含路径元素的变量

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

1 个答案: