对使用相同路径数据的多张地图使用本地geoPath变量，在d3.js中使用不同的投影

我正试图使用D3V4中的新局部特性在同一页面上呈现多个具有不同投影的贴图——我的想法是根据父DOM元素的类别使用不同的局部定义的贴图投影

但是我很难让本地定义的路径函数返回正确的SVG路径字符串

这是我的HTML–全幅分类元素较大，小元素应显示为小倍数，且投影比例较小：

<div id="nonenglish" class="map fullwidth" style="width: 100%"></div>

<div id="white" class="map fullwidth" style="width: 100%"></div>

<div id="origins_Europe" class="map small" ></div>
<div id="origins_Canada" class="map small" ></div>
<div id="origins_Africa" class="map small" ></div>

相关Javascript如下所示：当我全局定义path变量时，映射呈现（尽管大小相同），因此我排除了JSON数据或承诺的任何问题：

window.addEventListener('DOMContentLoaded', init);

function init() {  

let mapWidth = d3.select('.fullwidth').node().getBoundingClientRect().width,
        mapHeight = (window.innerHeight > mapWidth) ?  (mapWidth * 1.1).toFixed(0)  : (mapWidth * 0.8).toFixed(0);

svg = d3.selectAll(".map").append("svg")
    .attr("width", function() { 
        return d3.select(this.parentNode).classed("small") ? mapWidth/3 : mapWidth;
    })
    .attr("height", function() { 
        return d3.select(this.parentNode).classed("small") ? mapHeight/2 : mapHeight;
    })
    .attr("class", function() { 
        return d3.select(this.parentNode).classed("small") ? "small_svg" : "fullwidth_svg";
    });

let files = ["censusData.json", "mainecounties_topo.json"];

Promise.all( files.map(url => d3.json(url) ) ).then(function(results) {

  var censusData = results[0];
  var pathData = results[1];

    var counties = svg.append("g")
        .attr('class','countymap')
        .each( (d,i) => { 

            let s = (i<2) ? mapWidth * 10 : mapWidth * 6;

            let p = d3.geoConicConformal()
                    .parallels([29.5, 45.5])
                    .rotate([70.58, 1.1])
                    .center([-.8,50])
                    .scale(s)
                    .translate([0, -s/40]);

            path.set( this, d3.geoPath(p) );

            console.log(path.get(this).projection().scale())
            // Everything looks OK here!

        });

    counties.selectAll("path")
        .data(topojson.feature(pathData, pathData.objects.counties).features)
        .enter().append('path')
        .attr('class','counties')
        .attr('d',  d => { 
            let p = path.get(this); 
            console.log(p); 
            // It looks like a path function in the console...
            return p;
        } 
        .attr('fill',  '#ddd'  );

});
}

最后一条线索：当我去检查我的元素时，它们都是这样的-

根据：

返回指定节点上此局部变量的值。如果节点未定义此本地节点，则返回定义它的最近祖先的值。如果没有祖先定义此本地，则返回undefined

当您将局部变量d3.local的值设置为path.set，d3.geoPathp时，path.gett的返回值将是一个需要调用并传递d的函数

将路径代码的追加更改为此：

.attr('d',  d => { 
   let p = path.get(this); 
   //console.log(p); 
   // It looks like a path function in the console...
   return p(d);
})

应该正确获取路径的d属性。以下是一个参考示例：

希望这有帮助。如果您提供一个fiddle/plunkr（一个工作的代码段），这样就可以更容易地编辑代码并返回一个工作的URL，这会更好