2

このjsfiddleを見てください。ホバー時の拡大は、テキストと画像ではうまく機能しますが、グラフでも同じ効果を得たいと考えています。

ここに画像の説明を入力

可能であれば、このソリューションをD3SVG ベースのチャートに適用できるようにしたいと考えています。

この例では、jquery プラグイン AnythingZoomer を使用しています。これは良い出発点として私には見えましたが、それに固執する必要はありません。必要に応じて他のものを使用できます。

D3 fisheye plugingを認識しています。これは関連していますが、私が望むものではありません。

4

1 に答える 1

6

widthこれを行うには、 SVG でandを明示的に宣言せずheight(いずれにせよ CSS によって上書きされます)、viewBox属性cloneを使用してから、元のチャートのコンテンツに対してAnythingZoom を許可します。

デモ (脆弱): http://jsfiddle.net/H9psX/ http://jsfiddle.net/H9psX/38/

変更点

var svg = d3.select("#small-chart").append("svg")
//    .attr("width", diameter + 300)
//    .attr("height", diameter)
    .attr('viewBox', "0 0 " + 225 + " " + 225);

// ...

$("#zoom3").anythingZoomer({
    clone: true
});

関心事の分離

widthD3 (パック レイアウトのとを知る必要がある場所height) を使用して SVG で描画し、クラスと絶対配置を設定してズームする jquery プラグインを使用しているため、座標 (225pxマジック ナンバー) を CSS とJS。

理想的には、マジック ナンバーを 1 か所だけに留めておきます。これを行うには、CSS でのみ値を宣言し、SVG 要素を作成した後に JS で読み取ることができます。

于 2014-02-04T15:49:39.180 に答える