Javascript d3.js：正确链接节点的路径

我正在使用d3.js库绘制一些节点并链接它们，但它们没有正确链接它们。我尝试了太多的事情，但都没有给我一个解决办法

如图所示，路径仅在svg:rect的输入位置链接

 nodeEnter.append("svg:rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 1)
    .attr("height", 1)
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });



  nodeEnter.append("svg:text")
      .attr("x", 30)
      .attr("dy", ".35em")
      .attr("text-anchor", "")
      .text(function(d) { return d.name + " " + (d.occurences || ""); })
      .style("fill-opacity", 1e-6);



 nodeEnter.append("svg:image")

   .attr('width', 0)
   .attr('height', 0)
     .style("fill-opacity", 1e-6)
   .attr("xlink:href", function(d) {return d.icon; });


  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });



  nodeUpdate.select("rect")
    .attr("rx", 6)
    .attr("ry", 6)
    .attr("x", 0)
    .attr("y", -12.5)
    .attr("width", function(d){ return  (getWidthOfText(d.name, 'Helvetica Neue', 14)+getWidthOfText(d.ocurrences, 'Helvetica Neue', 14))+30;})
    .attr("height", 25)
    //.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
     .style("filter", "url(#drop-shadow)");


  nodeUpdate.select("text")
  .style("fill-opacity", 1);

  nodeUpdate.select("image")
     .attr("x", 6)
   .attr("y", -7)
  .attr('width', 20)
  .attr('height', 15)
  .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 1)

    .attr("height", 1)
        .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });


  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  vis.selectAll("image")
   .append("svg:title")
   .text(function(d) { return "Descripción: "+d.description+"\n\nComentarios: "+d.comment});

// Update the links…
var link = vis.selectAll("path.link")
  .data(tree.links(nodes), function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
  .attr("class", "link")
  .attr("d", function(d) {
    var o = {x: source.x0, y: source.y0};
    return diagonal({source: o, target: o});
  })
.transition()

  .duration(duration)
  .attr("d", diagonal);


 // Transition links to their new position.
 link.transition()
  .duration(duration)
  .attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
link.exit().transition()

  .duration(duration)
  .attr("d", function(d) {

    var o = {x: source.x, y: source.y};
    return diagonal({source: o, target: o});
  })
  .remove();

// Stash the old positions for transition.
nodes.forEach(function(d) {
  d.x0 = d.x;
  d.y0 = d.y;

});

---

有没有办法移动路径以正确链接节点？

如何确定每个节点的宽度

rect

？用生成每个节点的代码更新您的问题。正如您所说，我已更新代码@mark您的问题似乎是链接原点设置为源节点（x，y）。如果计算每个节点的绘制距离，将其添加到当前值中，它应该可以工作。好的，但是源节点点集在哪里？？因为我认为它是由带有投影函数的库自动计算的。最后我在节点的中心设置了连接点，我不能像我想的那样做。