d3 +传单路径填充问题答案

【问题标题】：d3 + leaflet path fill issued3 +传单路径填充问题
【发布时间】：2015-09-09 23:09:13
【问题描述】：

我正在使用 Leaflet 作为基础层和 d3 topojson 文件制作延时填充地图，以便我可以在某些国家/地区着色。我使用http://bost.ocks.org/mike/leaflet/ 开始使用，一切都很顺利，直到我尝试在俄罗斯联邦遮阴。它的陆地跨越不连续的瓷砖，当我尝试向我的#RUS 路径添加填充样式时，它的行为异常。示例在这里：http://dataviz.du.edu/projects/scratch/study_abroad.html 示例将需要 1.5 秒才能完全渲染，它为 3 个国家/地区着色，俄罗斯联邦最后着色。

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

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

【问题讨论】：

标签： javascript d3.js leaflet choropleth

【解决方案1】：

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

您一定弄错了，因为您的 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);
});

【讨论】：

谢谢。不，在这种情况下没有充分的理由使用 D3。我对 d3 比对传单更熟悉，所以我很感激没有 D3 也可以做到这一点的指针。