加载多个具有类似源代码的D3映射

Load multiple D3 maps with similar source code

本文关键字：源代码 D3 映射 加载      更新时间：2023-09-26

我制作了一张D3地图，突出显示了本州哪些县投票选举了新州长。我想用与我的州长地图相同的代码为另一个政治种族建立一个类似的地图。我复制了调控器映射代码，并为另一场比赛修改了它，更改了geojson文件和svg的位置。我把另一个种族的代码放在一个外部JS文件中，并把它放在我的index.html中的调速器JS文件下面。现在，根据哪个文件首先加载到我的.html文件中，一个地图将显示，而另一个则显示为白色。有没有办法让两个代码都不同到可以让地图同时出现？

您似乎正在写入全局命名空间（在您的情况下，是window对象）。

当您通过d3发出json请求时，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的面向对象功能来定义一个类似于的"类"

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

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

相关文章：