5

私は D3 を使用していますが、これまでのところ、クロロプレスの例を微調整して、特定の状態のみを描画することができました。これには、必要な状態を残すために、他のすべてのポリゴン データを単純に削除することが含まれていました。

私はこれから始めました： ここに画像の説明を入力

そして、これに微調整しました： ここに画像の説明を入力

ただし、私がやりたいことは、次のように、状態がディスプレイの前面と中央になるように、作成時にマップを自動パン/ズームすることです。 ここに画像の説明を入力

D3 ライブラリを介してこれを行いますか? または、これを実現するためのいくつかの独立したコード（現在、d3で実行されているjquery-svgpanを使用して、手動のパン/ズームを可能にしています）？

4

1 に答える 1

5

私が見つけたこれにアプローチする最も簡単な方法は、ズームしている状態の境界ボックスに基づいて、g状態を囲む要素 (例) に変換を設定することです。#states

// your starting size
var baseWidth = 600;

d3.selectAll('#states path')
    .on('click', function(d) {
        // getBBox() is a native SVG element method
        var bbox = this.getBBox(),
            centroid = [bbox.x + bbox.width/2, bbox.y + bbox.height/2],
            zoomScaleFactor = baseWidth / bbox.width,
            zoomX = -centroid[0],
            zoomY = -centroid[1];

        // set a transform on the parent group element
        d3.select('#states')
            .attr("transform", "scale(" + scaleFactor + ")" +
                "translate(" + zoomX + "," + zoomY + ")");
    });

ここでクリーンアップするためにできることは他にもたくさんあります - 最終的なズームにいくらかのマージンを与える、幅または高さに基づいてズームする必要があるかどうかを確認する、ズームに応じてストローク幅を変更する、トランジションをアニメートするなど - しかしそれは基本コンセプト。

于 2012-09-19T16:49:49.437 に答える