javascript - 随机加载城市标签

Question

我有一张世界地图，上面有德国和叙利亚的州及其城市。现在，如您所见，它们完全随机加载。

德国城市因标签缺失而部分加载

叙利亚城市根本没有负载。当我重新加载时，它随机地成为我发布的图片之一。

例如，这是我调用德国的函数。

  d3.json("germany.topo.json", function(error, ger){
    if (error) throw error;
    var states = topojson.feature(ger, ger.objects.states_germany),
        cities = topojson.feature(ger, ger.objects.cities_germany);

    g.selectAll(".states")
        .data(states.features)
        .enter()
        .append("path")
        .attr("class", "state")
        .attr("class", function(d) { return "state " + d.id; })
        .attr("d", path);
    g.append("path")
        .datum(cities)
        .attr("d", path.pointRadius('0.35'))
        .attr("class", "city");

      g.selectAll(".place-label")
          .data(cities.features)
          .enter().append("text")
          .attr("class", "place-label")
          .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
          .attr("dy", ".35em")
          .text(function(d) { return d.properties.name; });
  });

日期是 here

我可以部分重现此错误。也许你可以看一下并告诉我为什么它不能正常工作。提前致谢

Answer 1

您遇到的问题是此调用的结果，并且您正在对德国和叙利亚城市重复此调用:

g.selectAll(".place-label")
    .data(cities.features)
    .enter().append("text")
    .attr("class", "place-label")
    .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
    .attr("dy", ".35em")
    .text(function(d) { return d.properties.name; });

您通过在对 d3.json 的不同调用中选择具有“place-label”类的所有对象来搞乱您的选择。相反，请尝试如下操作:

// For German cities
g.selectAll(".german-place-label")

// For Syrian cities
g.selectAll(".syrian-place-label")

这似乎可以解决您的问题，尽管您可能会考虑重写代码，这样您只需通过一次调用即可添加所有城市，而不是两个独立的、几乎相同的调用。