Mike Bostock が提供する例に似た階層的なエッジ バンドリング グラフを作成しました (これは jsfiddle でリンクしています)。問題は、グラフが非常に大きいため、表示ウィンドウに完全に表示できず、多数のノードが互いに重なって表示されないことです (約 1500)。ノードが重ならないように実際の円を大きくしましたが、これはグラフの一部しか表示できず、残りを表示するにはスクロールする必要があることを意味します。
最終的に、拡大した円をズームアウトしてページ上で完全に見えるようにしましたが、ノードの名前が明らかに小さすぎて識別できませんでした。したがって、私がやりたいことは、グラフに魚眼レンズ効果を実装して、ユーザーがノードにカーソルを合わせるたびに小さなテキストに拡大効果があり、「虫眼鏡」の下のテキストを読むことができるようにすることです。
これは魚眼レンズの例のコードですが、エッジ バンドリング グラフに追加しても効果はありません。ここで目的の効果を確認できます: http://bost.ocks.org/mike/fisheye/
グラフでこの効果を実現するには、何を変更する必要がありますか?
var fisheye = d3.fisheye.circular()
.focus([360, 90])
.radius(100);
d3.select(".container").on("mousemove", function() {
fisheye.focus(d3.mouse(this));
node.each(function(d) { d.fisheye = fisheye(d); })
.attr("cx", function(d) { return d.fisheye.x; })
.attr("cy", function(d) { return d.fisheye.y; })
.attr("r", function(d) { return d.fisheye.z * 4.5; });
link.attr("x1", function(d) { return d.source.fisheye.x; })
.attr("y1", function(d) { return d.source.fisheye.y; })
.attr("x2", function(d) { return d.target.fisheye.x; })
.attr("y2", function(d) { return d.target.fisheye.y; });
});
これは、魚眼効果を実装したい階層バンドリング グラフの例です。