4

基本的に、d3 魚眼歪みアルゴリズムを放射状ツリーに適用しようとしています。私が遭遇している問題は、魚眼歪みに供給される座標が d3.layout.tree によって計算された座標であるという事実を中心に展開していると思います。しかし、実際の座標は g 変換によって調整されています。したがって、魚眼の歪みから生じる座標は、g 変換に戻すように調整する必要があります。

例えば：

// re-setting the projection according to fisheye coords
diagonal.projection(function(d) { d.fisheye = fisheye(d); return [d.fisheye.y, d.fisheye.x / 180 * Math.PI]; })

私はこれを試みてきました...ここにフィドルがあります。

私はやや近いです...助けていただければ幸いです。

4

1 に答える 1

5

コメントで提案した方向に従って、これが結果です。

https://jsfiddle.net/xdk5ehcr/

回転と平行移動を使用してノードを配置する代わりに、極座標として扱われるデータ (x,y) 値から水平位置と垂直位置を計算する 2 つの三角法ベースの関数を作成しました。

d.x次に、ポジショニング関数を読み取りやd.y直接の代わりに「アクセサ」関数として使用するように魚眼関数を設定する必要がありました。残念ながら、魚眼レンズに使用していた基本的なプラグインには、x/y アクセサー関数を取得および設定する方法が含まれていなかったため、それも変更する必要がありました。まだコードに含まれていなかったことに驚きました。これは、ほとんどの d3 レイアウト オブジェクトの標準機能です。

(github をセットアップしたら、それを追加するためにプル リクエストを作成する必要があります。ただし、魚眼レンズのスケール/ズーム機能がどのように機能するかを理解する必要があります。使っていません。）

位置決め機能は次のとおりです。

function getHPosition(d){
    //calculate the transformed (Cartesian) position (H, V)
    //(without fisheye effect)
    //from the polar coordinates (x,y) where 
    //x is the angle
    //y is the distance from (radius,radius)
    //See http://www.engineeringtoolbox.com/converting-cartesian-polar-coordinates-d_1347.html

    return (d.y)*Math.cos(d.x);
}
function getVPosition(d){
    return (d.y)*Math.sin(d.x);
};

関数はノードとリンクの元の位置を設定するために使用され、魚眼レンズが起動すると、これらの関数を内部で使用して、結果を (必要に応じて歪みを加えて)d.fisheye.xおよびとして返しd.fisheye.yます。

たとえば、d3.svg.diagonal初期化のために次のような関数を設定する投影を意味するリンクの場合:

var diagonal = d3.svg.diagonal()
    .projection(function(d) { 
        return [getHPosition(d), getVPosition(d)]; 
});

しかし、更新のためにこのように：

diagonal.projection(function(d) { 
    d.fisheye = fisheye(d); 
    return [d.fisheye.x, d.fisheye.y]; 
});

他にもいくつかの小さな変更があります。

プロット領域の寸法を少し単純化しました。

pointer-events:all;マウスがノードと空の背景の間を移動するときに魚眼レンズがオン/オフにならないように、背景の四角形を追加しました。

テキストの回転は気にしませんでしたが(ノード グループが回転しなくなったため、既定では回転しません)、個々のテキスト要素に回転変換を簡単に追加できます。

最後に、これは私が認めるよりも長く私を困惑させました.Javascriptの三角関数の角度はラジアンでなければなりません. なぜ私のレイアウトが重なって線が重なって醜いのか理解できませんでした。と と の切り替えに関係があると思っていたd3.svg.diagonal()のですd3.svg.diagonal.radial()が、逆トリガーやあらゆる種類のことをしようと多くの時間を費やしました...

于 2014-01-14T20:26:50.213 に答える