Javascript d3 map鼠标悬停事件响应缓慢
我正在使用d3贴图,需要在多边形(区域)上进行Javascript d3 map鼠标悬停事件响应缓慢,javascript,d3.js,Javascript,D3.js,我正在使用d3贴图,需要在多边形(区域)上进行鼠标悬停事件。我有它的工作,但它有点慢,我不知道为什么!这是一本书 更奇怪的是,我有一个GeoJSON文件,它比上面的文件更大(以kb为单位),但那是一个 这是怎么回事?以及如何提高mouseover事件的页面加载时间和响应能力 地图代码 var width = 1000; var height = 1100; var rotate = 60; // so that [-60, 0] becomes initial center of
鼠标悬停
事件。我有它的工作,但它有点慢,我不知道为什么!这是一本书
更奇怪的是,我有一个GeoJSON文件,它比上面的文件更大(以kb为单位),但那是一个
这是怎么回事?以及如何提高mouseover
事件的页面加载时间和响应能力
地图代码
var width = 1000;
var height = 1100;
var rotate = 60; // so that [-60, 0] becomes initial center of projection
var maxlat = 55; // clip northern and southern poles (infinite in mercator)
// normally you'd look this up. this point is in the middle of uk
var center = [-1.485000, 52.567000];
// instantiate the projection object
var projection = d3.geo.conicConformal()
.center(center)
.clipAngle(180)
// size of the map itself, you may want to play around with this in
// relation to your canvas size
.scale(10000)
// center the map in the middle of the canvas
.translate([width / 2, height / 2])
.precision(.1);
var zoom = d3.behavior.zoom()
.scaleExtent([1, 15])
.on("zoom", zoomed);
var svg = d3.select('#map').append('svg')
.attr('width', width)
.attr('height', height);
var g = svg.append("g");
svg.call(zoom).call(zoom.event);
var path = d3.geo.path().projection(projection);
d3.json("data/map-england.json", function(err, data) {
g.selectAll('path')
.data(data.features)
.enter().append('path')
.attr('d', path)
.attr('class', 'border')
.attr('stroke-width', '.5')
.attr('id', function(d) { return d.properties.Name; })
.on("mouseover", function(d) {
d3.select(this).classed("active", true );
})
.on("mouseout", function(d) {
d3.select(this).classed("active", false );
});
});
function zoomed() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
答案是简化地图的路径。您需要节点及其包TopoJson 在Windows上,我无法运行此程序包。我有一个主要的问题,它的Dependencies不支持Windows,Dependency版本…等等 所以我安装了一台运行Ubuntu的虚拟机,很快就启动并运行起来了 我运行了
-simplify-proportion
命令,得到了路径的简化版本。当时的地图非常平滑,反应非常灵敏