d3.js - マーカー付きの力グラフ上の D3 魚眼

Question

新しいフィッシュアイ プラグイン (http://bost.ocks.org/mike/fisheye/) が気に入っていますが、線ではなくパスとマーカーを使用するフォース グラフで動作させたいと考えています。私は D3 を初めて使用し、これまでのところマーカーのデモと魚眼レンズのデモを組み合わせることで私を打ち負かしました。成功した人がいて、正しい方向に向けることができるかどうか疑問に思いました。

乾杯ベン

Answer 1

vis.on("mousemove", function() { if (rmbMenuHidden) { fisheye.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;
        });
    }
}