d3.js - 多个 map 与 d3.js : change values of scale and center

Question

我正在构建一个 (d3 v4) 制图可视化，它允许用户在许多数据集(json 文件)和两个不同区域(一个行政单位)之间切换国家和较小的行政单位并入其首都)。实际上，通过按钮和 jquery，在初始国家/地区级别从一个数据集切换到另一个数据集效果很好。

问题:当切换到关于首都的 map /数据集时，它有点不太令人信服，因为投影最初是为整个国家设置的，因此用户必须多次缩放才能可视化妥妥的都城 map 。我想在调用投影时更改 .scale 和 .center 的值，但经过几次试验我还没有找到如何去做。

因为我只有两个不同的区域要显示，我的直觉是设置 scale 和 center 的第一个值并将它们更改为其他值(我知道我想在这两种情况下使用的 .scale 和 .center 的值) 当用户通过功能切换到首都 map 时。是否有可能轻松切换这些值？你对解决这个问题有什么建议吗？

当用户单击按钮切换到另一个数据集时，我将 json 文件路径加载到一个函数中，我试图以相同的方式加载 scale 的值，但我可能做错了。好像关于投影的那部分代码不能放在函数里？

感谢您的帮助!

我的一小部分代码:

var width = 1100, height = 770;

var projection = d3.geoConicConformal()
    .scale(19000) // value I would like to which when the region changes
    .center([4.45, 50.53]) // value I would like to which when the region changes
    .translate([width/2,height/2]);

var svg = d3.select( "#mapcontainer" )
    .append( "svg" )
    .attr("width", width)
    .attr("height", height)
    .style("border", "solid 1px black");

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

var color, jsonfile, legendtext;

function load (jsonfile, legendtext, color) {
    d3.selectAll(".currentmap").remove() ;
    d3.json(jsonfile, function(error, belgique) {
        g.selectAll("path")
        .data(belgique.features)
        .enter()
        .append("path")
        .attr("d", path)
        .style("stroke", "#fff")
        .attr( "class", "currentmap")
        .style("fill", function(d) {
            var value = d.properties.DATA;
            if (value) {return color(value);}
            else {return "rgb(250,110,110)"}
            });
            })
};

//one of the following function for each map
function BGQprovinces() { 
    jsonfile = "ATLAS/NewGeoJson/bgq-data1-provinces.json";
    legendText [= …];
    color = d3.scaleOrdinal()
                .domain( […])
        .range([…]);

    load(jsonfile, legendtext, color) ; 
    };

;

Answer 1

实现这一点的方法很少。

fitSize 和 fitExtent

一个是修改投影比例和平移，而不是比例和中心。这几乎是相同的操作，但 translate 平移投影平面，center 平移未投影平面。为此，您需要使用 projection.fitSize([width,height],geojsonObject) 或 projection.fitExtent([[x0,y0],[x1,y1]],geojsonObject)。后者将允许边距，例如，提供的第一个坐标是左上角，第二个坐标是边界框的右下角，在该边界框中将限制特征。

d3.json(jsonfile, function(error, belgique) {
     projection.fitSize([width,height], belgique);

    // now draw as you would:
    d3.selectAll(".currentmap").remove() ;
    g.selectAll("path")
    .data(belgique.features)
    .enter()
    .append("path")
    .attr("d", path)
    ...

请注意，要显示整个国家/地区，您需要具有显示整个国家/地区的 map 项或显示国家/地区所有部分的 map 项集合。您不能将数组与 fitSize 或 fitExtent 一起使用，如果您有一组特征，则可以使用以下方法创建特征集合:

var featureCollection = {"type":"featureCollection","features":featureArray}

对于您的情况，我建议使用 fitSize 或 fitExtent。

质心

如果您真的想修改中心属性而不是平移，或者您可能想更改旋转(世界上许多地方更可能出现圆锥形保角的结果，比利时应该没问题)，那么您需要中心的地理坐标。少数方法之一是从 path.geoCentroid 获取特征的质心:

var centroid = path.geoCentroid(geojsonObject); 

然后用它来设置要旋转的投影参数:

projection.rotate([ -centroid[0],-centroid[1] ])
projection.center([0,0])

或居中:

projection.rotate([0,0])
projection.center(centroid)

或两者的结合(取决于 map 投影类型)。现在您可以应用 fitSize 或 fitExtent，特征已经在中间，但现在我们可以设置比例。我建议将此作为潜在答案的原因是因为并非所有投影，尤其是圆锥投影，都可以通过仅修改比例以及平移和/或居中来获得所需的结果。

当然，对于圆锥投影，您可能还需要找到一种方法来设置平行线，但如果出现这种情况，我会把它留给另一个答案。