Question

我制作了一张D3地图，突出显示哪个县投票支持我州的新州长。我想使用与我的州长地图相同的代码为另一场政治竞赛建立类似的地图。我复制了governor map code并将其修改为the other race，更改了geojson文件以及svg的去向。我将其他种族的代码放入外部JS文件中，并将其放在我的index.html中的州长JS文件下面。现在，根据我的.html文件中首先加载的文件，将显示一个地图，而另一个显示为白色。无论如何，我可以使两个代码不同，以使地图同时出现吗？

Answer 1

您似乎 writing to the global namespace （在您的情况下，window对象）。

当您进行 json request through d3 时，json文件将异步加载，这意味着其余的javascript代码将继续运行。这也意味着第二个正在加载的文件将覆盖您刚刚声明的所有变量，并且在处理json请求时，第二个脚本已经覆盖了变量（由第一个脚本声明），所以每次加载json时，你基本上都是写相同的DOM元素。

如果您想要快速修复，可以将每个脚本包装在一个函数中并调用它们onload或使用 DOMContentLoaded 或 jquery ，但由于它们非常相似，您可以使用单个函数，例如：

function createPoliticalMap(elementID, jsonUrl){
    // your code...
    //...
    var svg = d3.select(elementID).append("svg")
    //...   
    d3.json(jsonUrl,function(error,geodata) {
        //...
    }
}

然后就这样做：

createPoliticalMap('#map-gov', 'data/gov.geojson');
createPoliticalMap('#map-ag', 'data/ag.geojson');

或者你可以利用JavaScript的 object oriented capabilities 来定义一个＆＃39;类＆＃39;类似的：

function PoliticalMap(elementID, jsonUrl){
    // define your stuff and make the json request based off of the parameters.
}

并做：

var govMap = new PoliticalMap('#map-gov', 'data/gov.geojson');
var agMap = new PoliticalMap('#map-ag', 'data/ag.geojson');

如果您希望能够在创建后操纵D3图形。

然后添加更多政治地图变得微不足道，如果您愿意，可以在其他页面中更轻松地包含代码。

使用类似的源代码加载多个D3映射

1 个答案: