带有d3.js的多个地图:更改比例和中心的值 [英] Multiple maps with d3.js: change values of scale and center

问题描述

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

I’m building a (d3 v4) cartographic visualization which allows the user to switch between many datasets (json files) and two different regions (administrative units of a country and smaller administrative units into its capital city). Actually the switch from one to another dataset on the initial country level works well, through buttons and jquery.

问题:切换到有关首都城市的地图/数据集时，其说服力要小一些，因为投影最初是针对整个国家/地区设置的，因此用户必须多次缩放才能可视化正确地绘制首都地图.我想在调用投影时更改.scale和.center的值，但是经过几次试验，我仍然找不到如何做的.

Problem: it’s a bit less convincing when switching to a map/dataset about the capital city, as the projection is initially set for the whole country and consequently the user has to zoom many times to visualize properly the map of the capital city. I would like to change the values of .scale and .center when calling the projection but after several trials I haven’t found how to do it.

由于我只需要显示两个不同的区域，所以我的直觉是设置scale和center的第一个值，然后将它们更改为其他值(我知道我想在两种情况下都使用.scale和.center的值)，当用户通过功能切换到首都城市的地图时.是否有可能轻松切换这些值?您对解决这个问题有什么建议吗?

As I only have two different regions to show, my intuition was to set first values of scale and center and to change them to other values (I know the values of .scale and .center I would like to use in both cases) when the user switches to a map of the capital city through a function. Is there any possibility to switch easily these values? Do you have any suggestion to solve this problem?

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

As I load the json file path into a function when the user clicks on the button to switch to another dataset, I was trying to load the value of scale the same way but I’m probably doing wrong. It seems that the part of the code about the projection can't be put in a function?

感谢您的帮助！

我的代码的小部分:

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) ; 
    };

;

推荐答案

目前很少有方法可以做到这一点.

There area few approaches to accomplish this.

fitSize和fitExtent

一种方法是修改投影比例并平移，而不是缩放和居中.这几乎是相同的操作，但是平移将平移投影平面，而中心将平移未投影的平面.为此，您需要使用projection.fitSize([width，height]，geojsonObject)或projection.fitExtent([[x0，y0]，[x1，y1]]，geojsonObject).后者将允许有余量，例如，提供的第一个坐标是在其中限制要素的边界框的左上角，提供的第二个坐标是右下角.

One is to modify the projection scale and translate as opposed to scale and center. This is nearly the same operation, but translate pans the projected plane and center will pan the unprojected plane. To do so you need to use projection.fitSize([width,height],geojsonObject), or projection.fitExtent([[x0,y0],[x1,y1]],geojsonObject). The latter will allow margins of say, the first coordinate provided is the top left and the second coordinate provided is the bottom right of a bounding box in which the feature will be constrained.

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一起使用，如果您具有要素数组，则可以使用以下方法创建要素集合:

Note that for showing all of a country you need to have a feature that shows the whole country or a feature collection that shows all the parts of a country. You cannot use an array with fitSize or fitExtent, if you have an array of features, you can create a feature collection by using:

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

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

For your case, I'd suggest using fitSize or fitExtent.

质心

如果您真的想修改中心属性而不是平移，或者您想更改旋转度(在世界许多地方，圆锥形保形的可能性更大，比利时应该没问题)，那么您需要中心的地理坐标.做到这一点的一种方法是从path.geoCentroid获取特征的质心:

If you really wanted to modify the center attribute as opposed to translate, or perhaps you want to change the rotation (a more likely outcome for conic conformals in many parts of the world, Belgium should be fine), then you need the geographic coordinates of the center. One way of a handful to do this is to get the centroid of a feature from path.geoCentroid:

var centroid = path.geoCentroid(geojsonObject); 

然后使用它来设置投影参数以旋转:

Then use that to set the projection parameters to rotate:

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

或居中

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

或两者的组合(取决于地图投影类型).现在您可以应用fitSize或fitExtent，该功能已经在中间，但是现在我们可以设置比例.我之所以认为这是一个可能的答案，是因为并非所有的投影(尤其是圆锥投影)都可以通过仅修改缩放比例以及平移和/或居中来给出期望的结果.

Or a combination of both (depending on map projection type). Now you can apply fitSize or fitExtent, the feature is in the middle already, but now we can set the scale. The reason I suggest this as a potential answer is because not all projections, concic projections in particular, will give desired results by modifying only scale along with translate and/or center.

当然，对于圆锥投影，您可能还需要找到一种设置平行度的方法，但是如果它出现的话，我将留给其他答案.

Of course for conic projections, you may need to find a way to set the parallels as well, but I'll leave that for another answer if it ever comes up.

这篇关于带有d3.js的多个地图:更改比例和中心的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！