Javascript 加载具有类似源代码的多个D3贴图

我绘制了一张D3地图，突出显示了我所在州的哪些县投票给了新州长。我想用和我的州长地图相同的代码为另一场政治竞赛绘制一张类似的地图。我复制并修改了，更改了geojson文件和svg的位置。我将另一个种族的代码放入一个外部JS文件，并将其放在index.html中我的调控者JS文件下面。现在，根据在my.html文件中首先加载的文件，一个地图将显示，而另一个则显示为白色。我是否可以使两个代码完全不同，以使地图同时显示？

看起来您是（在您的情况下，是

窗口

对象）

当您创建时，json文件是异步加载的，这意味着您的其余javascript代码将继续运行。这还意味着，无论第二个加载的是哪个文件，都会覆盖您刚才声明的所有变量，并且在处理json请求时，第二个脚本已经覆盖了（由第一个脚本声明的）变量，因此每次加载json时，您基本上都在写入相同的DOM元素

如果需要快速修复，您可以将每个脚本包装在一个函数中，并调用它们

onload

或使用或，但由于它们非常相似，您可以只使用一个函数，例如：

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的来定义一个类似以下类型的“类”：

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

---

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

文件本身是否与您在pastebin上发布的完全相同？或者代码被包装在另一个函数中？这些是文件。这就解决了它！我包括了多张地图。非常感谢你的帮助！