我正在创建一个地球仪，在该地球仪上绘制许多位置。当光标悬停在圆圈上时，每个位置都用一个小圆圈标识，并通过工具提示提供信息。
我的问题是，全球地图大多数时候都无法完全渲染。那是各个国家都没有出现，并且代码的行为在这一点上完全改变了。我大多数时候都说，因为大约每5次刷新一次浏览器，它就会完全渲染一次。我觉得我的代码中有一个漏洞，或者JSON文件的语法问题使浏览器感到困惑。
顺便说一句：我有同样的问题是FF，Safari和Chrome。我正在使用D3.js的v3
这是渲染代码：
d3.json("d/world-countries.json", function (error, collection) {
map.selectAll("path")
.data(collection.features)
.enter()
.append("svg:path")
.attr("class", "country")
.attr("d", path)
.append("svg:title")
.text( function(d) {
return d.properties.name; });
});
track = "countries";
d3.json("d/quakes.json", function (error, collection) {
map.selectAll("quakes")
.data(collection.features)
.enter()
.append("svg:path")
.attr("r", function (d) {
return impactSize(d.properties.mag);
})
.attr("cx", function (d) {
return projection(d.geometry.coordinates)[0];
})
.attr("cy", function (d) {
return projection(d.geometry.coordinates)[1];
})
.attr("class", "quake")
.on("mouseover", nodehi)
.on("mouseout", nodelo)
.attr("d", path)
.append("svg:title")
.text( function(d) {
var tip = d.properties.description + " long "+ (d.geometry.coordinates)[0] + " lat " + (d.geometry.coordinates)[1];
return tip
});
});
任何想法将不胜感激...
之所以看到这种行为，是因为您正在进行两个d3.json彼此不独立的异步调用（to ），这是因为您选择元素并将数据绑定到它们的方式。根据异步调用的性质，您无法确定哪个首先完成，并且取决于哪个完成，您会看到正确或错误的行为。
在两个处理程序函数中，您都将附加path元素。在第一个文件中（对于世界文件），您还选择path了将数据绑定到它们的元素。如果另一个调用先完成，则path页面上将包含一些元素。这些将与您传递给的数据匹配.data()，因此.enter()选择内容不会包含您期望的所有元素。如果调用以另一种方式完成，则这不是问题，因为您正在quake其他处理程序中选择元素。
有几种方法可以解决此问题。您可以为所有路径分配标识类（已经在做），并相应地更改选择器-在第一个处理程序中，在do.selectAll("path.country")和第二个处理程序中.selectAll("path.quake")。
或者，您可以将两个调用嵌套在一起d3.json，以便仅在第一个调用完成后才进行第二个调用。我会做这两个以确保何时绘制元素，但是出于性能方面的考虑，您可能仍希望同时进行两个调用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句