简化 KML 以用于 D3

Question

我正在使用 D3 Maps 并且相当 large KML。在每条路径上，我都附加了一个 mouseover 事件，它会改变颜色并显示工具提示。一切正常，但多边形路径的大小及其复杂性降低了交互性。

出于我的预期目的，地图没有必要如此详细。所以我想精简我的 KML 和其中的多边形，similar to this 但没有交互性。

地图代码

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 tooltip = d3.select("body")
  .append('div')
  .style('position', 'absolute')
  .style('z-index', '10')
  .style('visibility', 'hidden')
  .attr('class', 'county-info')
  .text('a simple tooltip');


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.replace(/ /g,'').toLowerCase(); })
      .on("mouseover", function(d) {
        d3.select(this).classed("active", true );
        tooltip
          .style('left', (d3.event.pageX - 15) + 'px')
          .style('top', (d3.event.pageY - 50) + 'px')
          .text(d.properties.Description)
          .style("visibility", "visible");
      })
      .on("mouseout", function(d) {
        d3.select(this).classed("active", false );
        tooltip.style('visibility', 'hidden');
      });
});

function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

是否有在线工具可以让我上传我的 KML 并让它返回相同的 KML 但经过简化？

如果没有，是否有任何简单的示例说明如何在没有任何额外交互代码的情况下简化路径？

Answer 1

我不得不按照 Tom 的建议使用节点 TopoJson 包简化路径。但是我无法在 Windows 中使用它！依赖项和包版本等问题如此之多

经历了很多痛苦之后，我决定让它在 Windows 中工作是不可能完成的任务。所以我去创建了一个虚拟机运行 Ubuntu。我马上就起来运行 node 和 TopoJson。

简化路径后，地图、悬停和一切都超级流畅。

简化 KML 以用于 D3

Simplifying KML for use with D3

javascript

d3.js