随机加载城市标签

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")

这似乎可以解决您的问题，但您可能会考虑重写代码，因此您只需要通过一个呼叫添加所有城市，而不是两个单独的，几乎相同的呼叫。