Javascript 城市标签的随机加载

我有一张德国和叙利亚及其城市的世界地图。正如你所看到的，现在它们完全随机加载

德国城市部分加载，因为标签丢失

叙利亚城市根本没有装载货物。当我重新加载它时，它就成了我发布的图片之一

这是我调用德国的函数

  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; });
  });

日期表

我可以部分重现这个错误。也许你可以看看，告诉我为什么它不能正常工作。

---

提前感谢

您遇到的问题是此电话的结果，而且您正在德国和叙利亚城市重复此电话：

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

---

这似乎解决了你的问题，尽管你可能会考虑改写你的代码，所以你只需要加上一个呼叫来添加所有的城市，而不是两个分开的、几乎相同的呼叫。

< P>你所面临的问题是这个调用的结果，而事实上你为德国和叙利亚城市重复它：

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

<>这似乎解决了你的问题，尽管你可能会考虑改写你的代码，这样你只需要添加一个调用的所有城市，而不是两个独立的、几乎相同的调用。