Question

我正在创建一个地球，我在其上绘制了许多地点。每个位置都用一个小圆圈标识，并在光标悬停在圆圈上时通过工具提示提供信息。

我的问题是大部分时间全局地图呈现不完整。这就是各个国家没有出现，代码的行为在这一点上完全改变了。我大部分时间都说，因为我每刷新一次浏览器就会完全渲染它。我觉得我的代码中有一个漏洞，或者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
        });
});

任何想法都会受到赞赏......

Answer 1

您看到此行为的原因是您正在进行两次异步调用（d3.json），这两次异步调用由于您选择元素并将数据绑定到它们的方式而彼此不相互独立。根据异步调用的性质，您无法分辨哪一个将首先完成，并且根据哪一个，您会看到正确或不正确的行为。

在两个处理程序函数中，您都附加了path个元素。在第一个（对于world文件）中，您还要选择path元素来将数据绑定到它们。如果其他呼叫先完成，则页面上会有path个元素。这些内容将与您传递给.data()的数据相匹配，因此.enter()选项不会包含您期望的所有元素。如果调用以另一种方式完成，则这不是问题，因为您在另一个处理程序中选择了quake个元素。

有几种方法可以解决这个问题。您可以为所有路径（您已经在进行的路径）分配识别类并相应地更改选择器 - 在第一个处理程序中，执行.selectAll("path.country")和第二个.selectAll("path.quake")。

或者，您可以将两个调用嵌套到d3.json，以便第二个调用仅在第一个调用完成后生成。我会做两个以确定何时绘制元素，但出于性能原因，您可能仍然希望同时进行两个调用。

地图在d3.js中无法完全呈现

1 个答案: