带有标记的力图上的 D3 鱼眼

Posted 2023-02-25

【中文标题】带有标记的力图上的 D3 鱼眼

【英文标题】：D3 fisheye on a force graph with markers

【发布时间】：2012-04-26 04:18:36

【问题描述】：

我喜欢新的鱼眼插件 (http://bost.ocks.org/mike/fisheye/)，但想让它在使用路径和标记而不是线条的力图上工作。我是 D3 的新手，到目前为止结合了标记演示，鱼眼演示打败了我，我想知道是否有人成功并能指出我正确的方向。

干杯本

【问题讨论】：

你知道怎么做吗？

是的：使用路径而不是边缘，然后更新了鱼眼功能，使线长考虑到节点大小的变化，请参阅下面的答案。

【参考方案1】：

vis.on("mousemove", function() if (rmbMenuHidden) 鱼眼.center(d3.mouse(this));

        node
            .each(function(d)  d.display = fisheye(d); )
            .attr("cx", function(d)  return d.display.x; )
            .attr("cy", function(d)  return d.display.y; )
            .attr("r", function(d)   d.display.r=d.display.z * 10; return d.display.r;);

        path.attr("d", function(d) 

            var dx = d.t.display.x - d.s.display.x;
            var dy = d.t.display.y - d.s.display.y;

            var h= Math.sqrt(dx * dx + dy * dy);
            var htr = h-d.t.display.r-d.edgeWidth-1;
            var cos=dx/h;
            var sin=dy/h;

            var dxt = cos*htr+d.s.display.x;
            var dyt = sin*htr+d.s.display.y;

            //clip source to circle radius too
            var dxs = cos*d.s.display.r+d.s.display.x;
            var dys = sin*d.s.display.r+d.s.display.y;

                var dx = d.t.display.x - d.s.display.x,
                dy = d.t.display.y - d.s.display.y;
                dr = Math.sqrt(dx * dx + dy * dy);
                return "M" + d.s.display.x + "," + d.s.display.y + "A" + dr + "," + dr + " 0 0,1 " + dxt + "," + dyt;
        );