Question

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

问题：当切换到关于首都的地图/数据集时，它有点不太有说服力，因为投影最初是为整个国家设置的，因此用户必须多次缩放才能显示适当的首都地图。我想在调用投影时更改.scale和.center的值，但经过几次试验后我还没有找到怎么做。

由于我只有两个不同的区域要显示，我的直觉是设置比例和中心的第一个值并将它们更改为其他值（我知道.scale和.center的值我想在两种情况下使用当用户通过功能切换到首都城市的地图时。有没有可能轻易切换这些值？你有什么建议可以解决这个问题吗？

当用户点击按钮切换到另一个数据集时，我将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

一种是修改投影比例并翻译而不是比例和中心。这几乎是相同的操作，但平移投影平面和中心将平移未投影的平面。为此，您需要使用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)
    ...

请注意，要显示所有国家/地区，您需要具有显示整个国家/地区的功能或显示国家/地区所有部分的功能集合。您不能将数组与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)

或两者的组合（取决于地图投影类型）。现在您可以应用fitSize或fitExtent，该功能已经在中间，但现在我们可以设置比例。我之所以认为这是一个潜在的答案的原因是因为并非所有的投影，尤其是粗略的投影，都会通过仅修改比例以及翻译和/或中心来给出期望的结果。

当然对于圆锥曲线投影，你可能需要找到一种方法来设置相似之处，但如果它出现的话，我会把它留给另一个答案。

使用d3.js的多个地图：更改比例和中心的值

1 个答案: