0

我正在使用 D3 的world-countries.json文件来创建世界国家的墨卡托地图，然后我将其绑定到一些数据以获得非连续制图。唉，加拿大、美国、澳大利亚等更大的面积意味着这些国家的一个单位相当于马耳他等几个单位的空间。

我认为我需要做的是规范化 geojson 形状，以便加拿大和马耳他在开始时大小相同。

知道我会怎么做吗？

谢谢！

更新：我已经尝试将所有路径的宽度和高度显式设置为一个小整数，但这似乎只是稍后被转换覆盖。代码如下：

// 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();
4

1 回答 1

3

您也许可以使用我在此处发布的辅助功能：https ://gist.github.com/1756257

这会缩放投影以使给定的 GeoJSON 对象适合给定的边界框。缩放投影而不是使用变换来缩放整个路径的一个优点是笔划可以在地图上保持一致。

另一个更简单的选择可能是：

  1. 投影路径；
  2. 用于path.getBBox()获取每个边界框（.getBBox()是原生 SVG 函数，不是 D3 方法）
  3. 在路径上设置一个变换，类似于您现在的操作，以缩放和平移路径以适合您的边界框。

这有点简单，因为它不涉及投影，但是您需要通过逆 ( 1/scale) 缩放笔触以保持一致（因此您将无法使用 CSS 设置笔触值）。它还需要首先实际渲染路径，然后对其进行缩放——这可能会影响复杂几何图形的性能。

于 2012-12-14T22:23:21.007 回答