Question

我试图在d3 v4中使用新的local（）功能在同一页面上呈现多个具有不同投影的地图-我的想法是根据父DOM的类使用不同的本地定义的地图投影元件。

但是我在获取本地定义的路径函数以返回正确的SVG路径字符串时遇到麻烦。

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

def lastposition(array,x):

    flag = 0
    for i in range(len(array)):
        if array[i] == int(x):
            x = i
            flag = 1
        else:
            pass
    if flag == 0:
        print 'None'
    else:
        print x

array = [2,5,2,3,5]

x = 2

lastposition(array,x)

下面是相关的Javascript（请注意：当我全局定义路径变量时，地图会渲染（尽管大小相同），因此我排除了JSON数据或promise的所有问题。）：< / p>

<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>

最后一条线索：当我检查我的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' ); }); }元素时，这就是它们的样子–

<path>

Answer 1

按照docs for #local.get()：

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

在将局部变量（d3.local（））的值设置为path.set( this, d3.geoPath(p) )时，返回的值为{{1 }}是您需要调用并传递path.get(this)的函数。

更改路径代码的附加内容：

应该正确地获取路径的.attr('d', d => { let p = path.get(this); //console.log(p); // It looks like a path function in the console... return p(d); })属性。这是一个参考示例： https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08

希望这会有所帮助。如果您提供一个小提琴/ plunkr（一个有效的代码段），那总会更好，以便更轻松地编辑代码并提供有效的URL。

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

1 个答案: