随机加载城市标签

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 的不同调用中选择了具有 class "place-label" 的所有对象，这弄乱了您的选择。相反，请尝试以下操作：

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

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

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

随机加载城市标签

Random loading of labels for cities

javascript

d3.js

topojson