圆弧上的D3 V4标记

时间:2017-12-18 10:03:24

标签: javascript d3.js svg

我想用D3 V4构建一个应用程序并遇到以下问题: 我使用d3.forceSimulation并希望可视化圆圈。这些圈子可以与一个或多个链接连接。 为了绘制链接,我使用this示例。

但我想在每个链接上都有一个标记。为此,我以this为例。但在我的应用程序中,我的圆圈半径更大,因此refX70.5。这导致我的标记不再触及弧线,我需要调整标记的refY - 属性。

截图:

markers dont hit link

我试图用勾选方法用毕达哥拉斯定理计算refY:

d3.selectAll("marker")
    .attr("refY", function(d){
        var dx = (d.target.x - d.source.x),
            dy = (d.target.y - d.source.y),
            dr = Math.sqrt(dx * dx + dy * dy),
            unevenCorrection = (d.sameUneven ? 0 : 0.5),
            arc = ((dr * d.maxSameHalf) / (d.sameIndexCorrected - unevenCorrection));
        var hyp = Math.sqrt(refX*refX+arc*arc)
        var offset = hyp - arc;
        if(d.sameMiddleLink)
        {
            return 0;
        }
        else
        {
            return d.sameArcDirection === 0? offset:-offset;
        }
    })
;

但它仍未触及链接。

有人可以帮助我并告诉我我做错了吗?

0 个答案:

没有答案