d3 map鼠标悬停事件响应慢

Question

我正在使用 d3 地图，需要在多边形（区域）上有一个 mouseover 事件。我有它的工作，但它有点慢，我不知道为什么！这是一个screencast.

更奇怪的是，我有一个 GeoJSON 文件，它比上面的文件更大（以 kb 为单位），但那个 speed is acceptable!

这是怎么回事？以及如何改进 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 + ")");
}

Answer 1

简化地图的路径就是答案。您将需要 Node 及其包 TopoJson。

在 Windows，我无法将此包裹发送到运行。我的主要问题是它的依赖项不支持 Windows，以及依赖项版本...等等

所以我安装了一个虚拟机运行ning Ubuntu，我很快就运行ning 了。

我运行 -simplify-proportion 命令并得到了路径的简化版本。地图当时非常流畅且反应灵敏。

d3 map鼠标悬停事件响应慢

d3 map mouseover event slow response

javascript

d3.js