javascript - 使用相似的源代码加载多个 D3 map

Question

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

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 定义一个“类”，例如:

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

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