您的第一种方法称为Voronoi diagramm
对于使用D3库的javascipt,这种图表有一个解决方案
为了使这个解决方案完整,我在这里粘贴M.Bostock示例中的代码
var w = 1280,
h = 800;
var projection = d3.geo.azimuthal()
.mode("equidistant")
.origin([-98, 38])
.scale(1400)
.translate([640, 360]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").insert("svg:svg", "h2")
.attr("width", w)
.attr("height", h);
var states = svg.append("svg:g")
.attr("id", "states");
var cells = svg.append("svg:g")
.attr("id", "cells");
d3.json("us-states.json", function(collection) {
states.selectAll("path")
.data(collection.features)
.enter().append("svg:path")
.attr("d", path);
});
d3.csv("airports.csv", function(airports) {
var positions = [];
airports.forEach(function(airport) {
positions.push(projection([+airport.longitude, +airport.latitude]));
});
// Compute the Voronoi diagram of airports' projected positions.
var polygons = d3.geom.voronoi(positions);
var g = cells.selectAll("g")
.data(airports)
.enter().append("svg:g");
g.append("svg:path")
.attr("class", "cell")
.attr("d", function(d, i) { return "M" + polygons[i].join("L") + "Z"; })
.on("mouseover", function(d, i) {
d3.select("#footer span").text(d.name);
d3.select("#footer .hint").text(d.city + ", " + d.state);
});
g.append("svg:circle")
.attr("cx", function(d, i) { return positions[i][0]; })
.attr("cy", function(d, i) { return positions[i][1]; })
.attr("r", 1.5);
});
使用OpenGL和Gouraud着色可以轻松实现第二个解决方案,但是将它导出到SVG(或者除了位图之外的其他任何东西)并不容易.我会考虑任何替代方案.