1

マップを div に表示しようとしていますが、このマップを div-size に制限したいのですが、現在、w と h の値と vis css 設定も無視されています。

SVG の高さと幅を設定する意味はありますか? 投影のスケールを上げると、常に組織よりも大きくなります。svg。

var w = 200;
var h = 300;

// this will attach a svg-element with the class "map" to "mydiv"
var map = d3.select("#mydiv").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "map"); 

var projection = d3.geo.albers()
    .origin([10.5,51])
    .scale(2000)
    .translate([100, 150]);

var path = d3.geo.path().projection(projection);

d3.json('germany.json', function(json) {
    map.selectAll('path')
        .data(json.features)
        .enter().append('path').attr('d', path);
});

そして私のCSS：

#vis {
    overflow: hidden;
    width: 350px;
    height: 220px;
}
4

1 に答える 1

6

D3 マップをスケーリングするには、基本的に次の 2 つの方法があります。

  • 投影をスケーリングします。

  • 要素にマップを配置し、gその要素に変換を設定します。これには、ストローク幅のスケーリングという厄介な副作用もあるためstroke-width、要素にスケーリングされたスタイルを設定する必要がある場合がありgます。

どちらの場合も、コンテナー要素に直接関係なくマップをスケーリングしています。コンテナに自動的にスケーリングする方法はないと思います-JSを介してコンテナの幅を取得する必要があると思います（ここではjQueryを使用しますが、純粋なJSオプションもあります）、スケールファクタを設定しますによると：

var containerWidth = $('#myDiv').width(),
    baseWidth = 1000,
    baseStrokeWidth = 1,
    scaleFactor = containerWidth/baseWidth;

// now use scaleFactor in a transform or projection scale, e.g.:
d3.select('g.mapContainer')
    .attr("transform", "scale(" + scaleFactor + ")")
    // and invert the scale to keep a constant stroke width:
    .style("stroke-width", baseStrokeWidth / scaleFactor + "px");

window.onresizeコンテナーのサイズが変更される場合は、スケールを再計算して変換を更新するハンドラーを追加で設定する必要があります。これは、投影スケールの代わりに変換されたg属性を使用する理由の 1 つです。ウィンドウのサイズ変更を処理するために、マップ全体を再投影する必要はなく、既存のパスを拡大または縮小するだけで、はるかに高速な操作になります。

于 2012-08-19T23:27:57.073 に答える