d3js强制布局中的链接上的箭头

Question

我正在使用强制布局来表示定向的未加权网络。我的灵感来自于下面的例子：http://bl.ocks.org/mbostock/1153292

我试图让不同大小的节点，但我有一个小问题。 用于在每个链接上绘制箭头的标记指向圆的中心。如果圆圈太大，它会完全覆盖箭头。

我该如何处理？

Answer 1

可以通过更改的d.target.x和d.target.y的值取半径偏移链接的目标由节点，即半径调整代码

path.attr("d", function(d) { 
var dx = d.target.x - d.source.x, 
    dy = d.target.y - d.source.y, 
    dr = Math.sqrt(dx * dx + dy * dy); 
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
}); 

（这将需要的部分数据，如d.target.radius）考虑在内。也就是说，用圆弧半径偏移箭头的末端。

Answer 2

最后我决定为每个链接创建一个标记（而不是每个类）。 该解决方案的优点是定义每个标记的偏移量，取决于在我自己的情况下是refX的目标节点。

// One marker for link... 
    svg.append("svg:defs").selectAll("marker") 
     .data(force.links()) 
    .enter().append("svg:marker") 
     .attr("id", function(link, idx){ return 'marker-' + idx}) 
     .attr("viewBox", "0 -5 10 10") 
     .attr("refX", function(link, idx){ 
     return 10 + link.target.size; 
     }) 
     .attr("refY", 0) 
     .attr("markerWidth", 6) 
     .attr("markerHeight", 6) 
     .attr("orient", "auto") 
    .append("svg:path") 
     .attr("d", "M0,-5L10,0L0,5") 
     .attr("fill", function(link){ 
     if(link.type == 'in') 
      return "green"; 
     return "blue"; 
     }); 

现在有一个小问题，即线条是曲线。这意味着标记/箭头应该翻译不仅在X轴，而且在Y轴上，这可能取决于曲线的射线值的...

Answer 3

这里我的解决办法：

首先我计算路径水平轴的角度（gamma）。然后我得到半径的X分量（Math.cos(gamma) * radius）和Y分量（Math.sin(gamma) * radius）。然后用这些组件偏移路径的末端。

function linkArc(d) { 
    var t_radius = calcRadius(d.target.size); 
    var s_radius = calcRadius(d.source.size); 
    var dx = d.target.x - d.source.x; 
    var dy = d.target.y - d.source.y; 
    var gamma = Math.atan(dy/dx); 
    var tx = d.target.x - (Math.cos(gamma) * t_radius); 
    var ty = d.target.y - (Math.sin(gamma) * t_radius); 
    var sx = d.source.x - (Math.cos(gamma) * s_radius); 
    var sy = d.source.y - (Math.sin(gamma) * s_radius); 

    return "M" + sx + "," + sy + "L" + tx + "," + ty; 
} 

首先你会注意到我没有使用弧，但原理应该是相同的。 另外我的节点有一个size属性，我可以从中计算出圆的直径。

最后我的标记被定义为是：

var arrowsize = 10; 
var asHalf = arrowsize/2; 
svg.append("defs").selectAll("marker") 
     .data(["arrowhead"]) 
     .enter().append("marker") 
     .attr("id", function (d) { 
      return d; 
     }) 
     .attr("viewBox", "0 -5 " + arrowsize + " " + arrowsize) 
     .attr("refX", arrowsize) 
     .attr("refY", 0) 
     .attr("markerWidth", 9) 
     .attr("markerHeight", 9) 
     .attr("orient", "auto") 
     .attr("class", "arrowhead-light") 
     .append("path") 
     .attr("d", "M 0," + (asHalf * -1) + " L " + arrowsize + ",0 L 0," + asHalf); 

我还没有找到一种方法来控制标记的每一个副本。

Answer 4

如果您将使用<line>而不是<path>，以下内容适用于您，我使用当前解决方案。它是基于@ɭɘɖɵʊɒɼɖ江戸解决方案：

在你tick事件侦听器：

linkElements.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { 
      return getTargetNodeCircumferencePoint(d)[0]; 
     }) 
     .attr("y2", function(d) { 
      return getTargetNodeCircumferencePoint(d)[1]; 
     }); 

function getTargetNodeCircumferencePoint(d){ 

     var t_radius = d.target.nodeWidth/2; // nodeWidth is just a custom attribute I calculate during the creation of the nodes depending on the node width 
     var dx = d.target.x - d.source.x; 
     var dy = d.target.y - d.source.y; 
     var gamma = Math.atan2(dy,dx); // Math.atan2 returns the angle in the correct quadrant as opposed to Math.atan 
     var tx = d.target.x - (Math.cos(gamma) * t_radius); 
     var ty = d.target.y - (Math.sin(gamma) * t_radius); 

     return [tx,ty]; 
} 

我相信这个解决方案可以被修改，以适应<path>元素，但是我还没有尝试过。

Answer 5

末来回答，但是综合所有以前的答案了一下，我想出了，因为角（如果你发现缺乏好奇全局变量的一个全面的解决方案，在D3 V4对我的作品，写的打字稿）。下面是包含的关键部件，包括（因为我的整个生产代码太长和NDA下）一个片段。主要想法被注释为代码注释。最终的结果是这样的：

所有的

首先，既然你试图让不同大小的节点，我会假设你有你的节点数据内半径属性。假设它是这样一组对象：

{ 
    id: input.name, 
    type: input.type, 
    radius: input.radius 
} 

然后标记被追加。注意，每一个箭头（或标记）的大小为10，其中有一半是5.您可以将其指定为像@变量ɭɘ-ɖɵʊɒɼɖ-江戸并在他的回答，但我就是太懒。

let marker = svg.append("defs") 
    .attr("class", "defs") 
    .selectAll("marker") 
    // Assign a marker per link, instead of one per class. 
    .data(links, function (d) { return d.source.id + "-" + d.target.id; }); 
// Update and exit are omitted. 
// Enter 
marker = marker 
    .enter() 
    .append("marker") 
    .style("fill", "#000") 
    // Markers are IDed by link source and target's name. 
    // Spaces stripped because id can't have spaces. 
    .attr("id", function (d) { return (d.source.id + "-" + d.target.id).replace(/\s+/g, ''); }) 
    // Since each marker is using the same data as each path, its attributes can similarly be modified. 
    // Assuming you have a "value" property in each link object, you can manipulate the opacity of a marker just like a path. 
    .style("opacity", function (d) { return Math.min(d.value, 1); }) 
    .attr("viewBox", "0 -5 10 10") 
    // refX and refY are set to 0 since we will use the radius property of the target node later on, not here. 
    .attr("refX", 0) 
    .attr("refY", 0) 
    .attr("markerWidth", 5) 
    .attr("markerHeight", 5) 
    .attr("orient", "auto") 
    .append("path") 
    .attr("d", "M0,-5L10,0L0,5") 
    .merge(marker); 

然后，路径可以参考每个个体标记其ID：

let path = svg.append("g") 
    .attr("class", "paths") 
    .selectAll("path") 
    .data(links, function (d) { return d.source.id + "-" + d.target.id; }); 
// Update and exit are omitted. 
// Enter 
path = path 
    .enter() 
    .append("path") 
    .attr("class", "enter") 
    .style("fill", "none") 
    .style("stroke", "#000") 
    .style("stroke-opacity", function (d) { return Math.min(d.value, 1); }) 
    // This is how to connect each path to its respective marker 
    .attr("marker-end", function(d) { return "url(#" + (d.source.id + "-" + d.target.id).replace(/\s+/g, '') + ")"; }) 
    .merge(path); 

一个可选的东西要修改，如果你想要更多的功能：允许你的。对（“嘀”，打勾）监听器接收更多变量来测试边界。例如，svg的宽度和高度。

.on("tick", function() { ticked(node, path, width, height) }) 

，这是你的新勾选功能的基础上@ɭɘ-ɖɵʊɒɼɖ-江戸的答案：

ticked(node, path, width, height) { 
    node 
    .attr("transform", function(d){return "translate(" + Math.max(d.radius, Math.min(width - d.radius, d.x)) + "," + Math.max(d.radius, Math.min(height - d.radius, d.y)) + ")"}); 

    path 
    .attr("d", d => { 
     let dx = d.target.x - d.source.x, 
      dy = d.target.y - d.source.y, 
      dr = Math.sqrt(dx * dx + dy * dy), 
      gamma = Math.atan2(dy, dx), // Math.atan2 returns the angle in the correct quadrant as opposed to Math.atan 
      sx = Math.max(d.source.radius, Math.min(width - d.source.radius, d.source.x + (Math.cos(gamma) * d.source.radius) )), 
      sy = Math.max(d.source.radius, Math.min(height - d.source.radius, d.source.y + (Math.sin(gamma) * d.source.radius) )), 
      // Recall that 10 is the size of the arrow 
      tx = Math.max(d.target.radius, Math.min(width - d.target.radius, d.target.x - (Math.cos(gamma) * (d.target.radius + 10)) )), 
      ty = Math.max(d.target.radius, Math.min(height - d.target.radius, d.target.y - (Math.sin(gamma) * (d.target.radius + 10)) )); 
     // If you like a tighter curve, you may recalculate dx dy dr: 
     //dx = tx - sx; 
     //dy = ty - sy; 
     //dr = Math.sqrt(dx * dx + dy * dy); 
     return "M" + sx + "," + sy + "A" + dr + "," + dr + " 0 0,1 " + tx + "," + ty; 
    }); 
    } 

正如@约书亚 - 科莫提到的，它应该是一个加号计算时sx和sy。