Question

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

每个节点的大小与它的indegree和outdegree成正比，链接的厚度根据以下链接属性而变化：

.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

的节点的tick功能

     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

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

当有时目标节点小到5时，你的nodeRadius固定为20，这会导致你退避太远
您没有考虑＆＃34;后退＆＃34;中标记的大小。

一点点反复试验让我：

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;
};

这是{{3}}。

根据边缘厚度缩放箭头，让它们触摸尺寸变化的节点的外边缘

1 个答案: