d3地理地圖溢出

我嘗試在div中顯示我的地圖 - 但我希望將此地圖限制爲div尺寸 - 現在，它忽略w和h值以及vis css設置。d3地理地圖溢出

設置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; 
}

來源

2012-08-19 Thomas Deutsch

#vis和#mydiv是兩個不同的DIV元素嗎？ – mbostock 2012-08-19 17:57:58

基本上有兩種方式來擴展D3地圖：

規模的投影。
將地圖放入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屬性而不是投影比例尺的一個原因 - 處理窗口大小調整，您不必重新投影整個地圖，只需將現有路徑向上或向下縮放，即可實現更快的操作。

來源

2012-08-19 23:27:57 nrabinowitz

d3地理地圖溢出

回答

相關問題