javascript - svg defs def 在 d3 中的可变位置

Question

我正在使用 d3.js 强制导向图。它有节点和连接它们的链接。为了创建箭头，我使用 svg 和 d3 组合起来，如下所示:

    gA.svg.append('defs').selectAll('marker').data(['arrow-head']) // binding 'arrow-head' is our way of attaching a name!
        .enter().append('marker')
            .classed('arrow-head', true)
            .attr({
                id: String,
                viewBox: '0 -5 10 10',
                refX: 24, // this controls the distance of the arrowhead from the end of the line segment!
                refY: 0,
                markerWidth: 5,
                markerHeight: 5,
                orient: 'auto',
            })
            .append('path')
                .attr('d', 'M0,-5L10,0L0,5')

要将箭头附加到每个边缘/链接的末端，我这样做:

    let link = gA.svg.selectAll('.link').data(gA.force.links(), link => gA.node_id(link.source) + '--->' + gA.node_id(link.target)) // links before nodes so that lines in SVG appear *under* nodes
    link.enter().append('line')
        .classed('link', true)
        .attr('marker-end', 'url(#arrow-head)') // add in the marker-end defined above
    link.exit().remove()

使箭头距线段末端的距离可变的最佳方法是什么？这样做的目的是将箭头定位在每个节点圆的边缘，而不是节点的中间。最好不要为每个可能的距离创建单独的 SVG 定义:)

我在想这样的事情:

.attr('marker-end', var_arrow_head)

function var_arrow_head(link){
    radius = link.target.radius
    refX = 2 + 5*radius
    magically get an altered version of arrow-head with the new refX value
    return 'url(#magic-arrow-head)'
}

Answer 1

您似乎想将标记放置在每行的末尾，但节点的半径是可变的。在这种情况下，我建议您在 defs 中使用单个标记定义，并根据可变节点半径更新链接的长度。

这个 stackoverflow 问题包含可能的答案 - linking nodes of variable radius with arrows