javascript - 根据边缘厚度缩放箭头，并使其接触大小不同的节点的外边缘

Question

我有一个功能齐全的强制有向图。我正在尝试使用方向箭头。

每个节点的大小与其入度和出度成正比，并且链接的粗细根据以下链接属性而变化:

.attr("stroke-width",function(d) {return d.total_amt/60;})

我试图使箭头与笔划宽度和节点大小成比例。

不能选择使用多个标记，因为笔划宽度的变化未知，因为它取决于链接属性之一的 d.total_amount。

因此，我尝试以数学方式计算该线的 x2 和 y2 值:

               var nodeRadius = 20;
var lineX2 = function (d) {
    var length = Math.sqrt(Math.pow(d.target.y - d.source.y, 2) + Math.pow(d.target.x - d.source.x, 2));
    var scale = (length - nodeRadius) / length;
    var offset = (d.target.x - d.source.x) - (d.target.x - d.source.x) * scale;
    return d.target.x - offset;
};
var lineY2 = function (d) {
    var length = Math.sqrt(Math.pow(d.target.y - d.source.y, 2) + Math.pow(d.target.x - d.source.x, 2));
    var scale = (length - nodeRadius) / length;
    var offset = (d.target.y - d.source.y) - (d.target.y - d.source.y) * scale;
    return d.target.y - offset;
};



  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(d3GraphData.links)
    .enter().append("line")
    .attr("stroke-width",function(d) {return d.total_amt/60;})
    .attr("class", "link")
     .attr("x1", function (d) {
    return d.source.x;
})
    .attr("y1", function (d) {
    return d.source.y;
})
    .attr("x2", lineX2)
    .attr("y2", lineY2)
     .attr("marker-end", "url(#end)")

下面是使用lineX2和lineY2的节点的刻度函数

     function ticked() {
    link
      .attr("x1", function(d) {
        return d.source.x;
      })
      .attr("y1", function(d) {
        return d.source.y;
      })
        .attr("x2", lineX2)
        .attr("y2", lineY2)

    node
      .attr("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      });
  }

以下是标记定义:

svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 0 10 10")
    .attr("refX", "4")
    .attr("refY", "3")
    .attr("markerUnits", "strokeWidth")
    .attr("markerWidth", "7")
    .attr("markerHeight", "2")
    .attr("orient", "auto")
  .append("svg:path")
   .attr("d", "M 0 0 L 10 5 L 0 10 z")

现在这似乎部分起作用，箭头似乎与边缘厚度成比例。

但是当节点尺寸较小时，箭头似乎不会接触节点的外边缘并且会更早终止。

我确实尝试在lineX2和lineY2的计算中使用d3.scaleLinear()而不是nodeRadius但这使得整个图表非常奇怪。

var minRadius = 5
       var maxRadius = 20
       var scale = (length - d3.scaleLinear().range([minRadius,maxRadius])) / length

此外，即使箭头似乎与边缘厚度成正比，控制台仍然会抛出以下错误:

Error: <line> attribute x2: Expected length, "NaN".
(anonymous) @ d3.v4.min.js:2
797d3.v4.min.js:2 Error: <line> attribute y2: Expected length, "NaN". 

下面是fiddle这说明了问题

Answer 1

今天早上重新审视这个问题。您的数学与我在评论中链接的答案中使用的数学非常相似。我认为这个问题有两个方面:

1. 当目标节点有时小至 5 时，您的 nodeRadius 固定为 20，这会导致您退避得太远
2. 您没有在“后退”中考虑标记的大小。

一些尝试和错误让我:

var lineX2 = function(d) {

  var mw = d.total_amt / 60, // marker width
  ms = Math.sqrt((mw * mw) + (mw * mw)) * 1.2; // marker size plus "fudge"

  var weight = d.target.inDegree ? d.target.inDegree : 0 + d.target.outDegree ? d.target.outDegree : 0;
  weight = weight >= 20 ? 20 : (weight < 5 ? 5 : weight);
  var r = weight + ms; // final radius

  var length = Math.sqrt(Math.pow(d.target.y - d.source.y, 2) + Math.pow(d.target.x - d.source.x, 2));
  var scale = (length - r) / length;
  var offset = (d.target.x - d.source.x) - (d.target.x - d.source.x) * scale;
      return d.target.x - offset;
};

<小时/>

这是running .