Question

我有一棵d3（v5）树，并为每个路径添加了标签。将标签放在路径上居中的所有方法都涉及在父级和子级之间使用相除，相减x和y的组合。当节点在对角线上移动，重新调整等时，这种方法无法找到路径的真实中心。是否可以使用路径而不是父母/孩子的坐标来找到中心？

// Update the links...
var link = svg.selectAll('g.link')
  .data(links, function(d) {
  return d.id;
});

// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('g', 'g')
  .attr("class", "link")
  .attr("stroke-width", function(d){
    return d.data.toParentStrokeWidth;
  })
.attr("stroke", function(d){
return '#868aa8';//added for future variable color
})

linkEnter.append('path')
  .attr('d', function(d) {var o = {x: source.x0, y: source.y0}; return diagonal(o, o)});

linkEnter.append("foreignObject")
.attr("width", "40")
.attr("height", "40")
.append('xhtml').html(function(d) {
  return '<div class="treeLabel">' + d.data.name + '</div>'
})

// UPDATE
var linkUpdate = linkEnter.merge(link);

// Transition back to the parent element position
linkUpdate.select('path').transition()
  .duration(duration)
  .attr('d', function(d) {
    return diagonal(d, d.parent)
  });

linkUpdate.select('foreignObject').transition()
  .duration(duration)
  .attr('transform', function(d){
    if (d.parent) {
      return 'translate(' + ((d.parent.y + d.y) / 2) + ',' + ((d.parent.x + d.x) / 2) + ')'
    }
  })

// Remove any exiting links
link.exit().each(function(d) {
  d.parent.index = 0;
})

var linkExit = link.exit()
  .transition()
  .duration(duration);

linkExit.select('path')
  .attr('d', function(d) {var o = {x: source.x, y: source.y}; return diagonal(o, o)})

linkExit.select('text')
  .style('opacity', 0);

linkExit.remove();

更新已修改以更正课程问题

将标签添加到d3树路径的中心

0 个答案: