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);
});
我正在使用 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);
});