d3 +传单路径填充问题

d3 + leaflet path fill issue

我正在使用 Leaflet 作为基础层和 d3 topojson 文件制作延时填充地图,以便我可以在某些国家/地区着色。我用了 http://bost.ocks.org/mike/leaflet/ to get started, and everything was going great until I tried to shade in the Russian Federation. Its landmass spans non-contiguous tiles, and when I try to add a fill style to my #RUS path, it behaves anomalously. Example is here: http://dataviz.du.edu/projects/scratch/study_abroad.html 示例需要 1.5 秒才能完全渲染,它对 3 个国家/地区进行着色,最后对俄罗斯联邦进行着色。

此示例使用了我在其他纯 d3 项目中使用过的 topojson 文件,并在这些上下文中填充了 #RUS 而没有出现此问题。

有人可以帮忙吗?提前致谢。

This example uses a topojson file that I have used in other, pure d3 projects and have filled #RUS in those contexts without this issue.

您一定是弄错了,因为您的 TopoJSON 文件实际上已损坏。请在此处查看直接来自您服务器的文件的示例:http://plnkr.co/edit/QOTwV3?p=preview 请注意,我使用的是纯 TopoJSON 和 Leaflet 的 GeoJSON 层,但它产生的结果完全相同。

PS。为什么要为此使用 D3 有什么原因吗?询问是因为我看到你在做什么,只需使用 Leaflet 和 TopoJSON 即可完成,无需 D3。这是一个简单的例子:

function delay(features) {
  var geojsonLayer = new L.GeoJSON(null, {
    style: getStyle,
  }).addTo(map);
  var delay = 100;
  features.forEach(function(feature) {
    delay = delay + 100;
    setTimeout(function() {
      geojsonLayer.addData(feature);
    }, delay);
  });
}

var url = 'http://crossorigin.me/http://dataviz.du.edu/projects/scratch/worldnew.json';

$.getJSON(url, function(data) {
  var geojsonData = topojson.feature(data, data.objects.test);
  delay(geojsonData.features);
});