在D3中將地理形狀縮放到相似尺寸

我使用D3的world-countries.json文件創建了世界各國的墨卡托地圖，然後我將這些地圖綁定到一些數據以獲得不連續的圖像。唉，加拿大，美國，澳大利亞等國的規模要大得多，這意味着這些國家的一個單位就是馬耳他的幾個單位的空間等值。在D3中將地理形狀縮放到相似尺寸

我認爲我需要做的是標準化幾何形狀，例如加拿大和馬耳他在開始時的尺寸相同。

任何想法我會怎麼做？

謝謝！

更新：我試過顯式地將所有路徑的寬度和高度設置爲一個小整數，但似乎稍後會被變換覆蓋。代碼如下：

// Our projection. 
var xy = d3.geo.mercator(), 
    path = d3.geo.path().projection(xy); 

var states = d3.select("body") 
    .append("svg") 
    .append("g") 
    .attr("id", "states"); 

function by_number() { 

function compute_by_number(collection, countries) { 

    //update 
    var shapes = states 
      .selectAll("path") 
       .data(collection.features, function(d){ return d.properties.name; }); 
    //enter  
     shapes.enter().append("path") 
       .attr("d", path) 
       .attr("width", 5) //Trying to set width here; seems to have no effect. 
       .attr("height", 5) //Trying to set height here; seems to have no effect. 
       .attr("transform", function(d) { //This works. 
       var centroid = path.centroid(d), 
       x = centroid[0], 
       y = centroid[1]; 
       return "translate(" + x + "," + y + ")" 
       + "scale(" + Math.sqrt(countries[d.properties.name] || 0) + ")" 
       + "translate(" + -x + "," + -y + ")"; 
       }) 
      .append("title") 
       .text(function(d) { return d.properties.name; }); 
    //exit 
} 

d3.text("../data/country_totals.csv", function(csvtext){ 
    var data = d3.csv.parse(csvtext); 
    var countries = []; 
    for (var i = 0; i < data.length; i++) { 
     var countryName = data[i].country.charAt(0).toUpperCase() + data[i].country.slice(1).toLowerCase(); 
     countries[countryName] = data[i].total; 
    } 

    if (typeof window.country_json === "undefined") { 
     d3.json("../data/world-countries.json", function(collection) {   
      window.country_json = collection; 
      compute_by_number(collection, countries);   


     }); 
    } else { 
      collection = window.country_json; 
      compute_by_number(collection, countries); 
    } 

    }); 
} //end by_number 

by_number();

來源

2012-12-14 aendrew

我想你可以先計算不同形狀的邊界框，然後對寬度或高度進行歸一化（或者同時使用某種邏輯）。 –

請原諒我非常不喜歡的問題 - 對d3.js非常新穎 - 但是如何計算d3中路徑的邊界框？ – aendrew

您可能能夠使用助手功能我張貼在這裏：https://gist.github.com/1756257

此擴展投影以滿足給定GeoJSON的對象在給定的邊界框。縮放投影的一個優點，而不是使用變換來縮放整個路徑，因爲筆畫在地圖上可以保持一致。

另外，更簡單的選擇可能是：

項目的路徑;
使用path.getBBox()以獲得每個邊界框（.getBBox()是土生土長的SVG功能，而不是一個D3法）
設置變換的道路上，類似於你現在怎麼辦呢，縮放和平移路徑適合你的包圍盒。

這有點簡單，因爲它不涉及投影，但您需要通過倒數（1/scale）來縮放筆畫以保持它們一致（因此您將無法設置用CSS中風值）。它還需要實際先渲染路徑，然後對其進行縮放 - 這可能會影響複雜幾何圖形的性能。

來源

2012-12-14 22:23:21 nrabinowitz

這是有益的，我會給它一個鏡頭！謝謝！ – aendrew

在D3中將地理形狀縮放到相似尺寸

回答

相關問題