d3 geo map overflow

Question

div에서 내지도를 표시하려고합니다.하지만이지도를 div 크기로 제한하려고합니다. 지금 당장은 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 :

D3 맵을 확장 할 수있는 방법은 두 가지가 기본적으로

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

Answer 1

:

• 규모 투사.

• 지도를 g 요소에 넣고 해당 요소에 대한 변환을 설정합니다. 이렇게하면 스트로크 너비를 조정할 때의 부작용이 있으므로 g 요소에 stroke-width 크기의 배율을 설정해야 할 수도 있습니다.

두 경우 모두 컨테이너 요소와 직접적인 관련없이지도를 확대합니다. 컨테이너에 자동으로 확장하는 방법이 없다고 생각합니다. 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 속성을 사용하는 이유 중 하나입니다. 즉, 윈도우 크기 조정을 처리하고, 전체 맵을 재 투영 할 필요가 없으며, 기존 경로를 위 또는 아래로 확장하고 훨씬 더 빠른 작업을 수행 할 수 있습니다.