将voronoi图限制在d3.js中的国家边界内
我想在地图上生成一个沃罗诺图。我想做的是将Voronoi图限制在地图的边界内,但我不知道该怎么做 这是我现在的部分代码。有人能提供一些想法让我试试吗?我不知道从哪里开始。我是d3.js的新手 非常感谢你将voronoi图限制在d3.js中的国家边界内,d3.js,voronoi,D3.js,Voronoi,我想在地图上生成一个沃罗诺图。我想做的是将Voronoi图限制在地图的边界内,但我不知道该怎么做 这是我现在的部分代码。有人能提供一些想法让我试试吗?我不知道从哪里开始。我是d3.js的新手 非常感谢你 var vertices = dhs.map(function(d) { return [+d.lon, +d.lat]; }); var median = dhs.map(function(d) { return +d.dhsMedian; }); var max = d3.max
var vertices = dhs.map(function(d) { return [+d.lon, +d.lat]; });
var median = dhs.map(function(d) { return +d.dhsMedian; });
var max = d3.max(median, function(d) { return d; });
var min = d3.min(median, function(d) { return d; });
console.log(max);
console.log(min);
var medianScale = d3.scale.linear()
.domain([min, max])
.range([0, 90]);
var voronoi = d3.geom.voronoi()
.clipExtent([0, 0], [width, height]);
var voronoied_vertices = voronoi(vertices);
var input = [];
for (var i = 0; i < vertices.length; i++) {
input.push(
{
"vertice":voronoied_vertices[i],
"median":medianScale(median[i])
}
)
};
layer4.selectAll("path")
.data(input)
.enter().append("svg:path")
.classed("voronoi", true)
.attr("d", function(d) { return "M" + d["vertice"].map(function(d) { return projection(d); }).join("L") + "Z"; })
.attr("id", function(d) {
console.log(d['median']);
if ( 0 <= d["median"] && d["median"] < 10) { return "color1"; }
else if (10<= d["median"] && d["median"] <20) { return "color2"; }
else if (20<= d["median"] && d["median"] <30) { return "color3"; }
else if (30<= d["median"] && d["median"] <40) { return "color4"; }
else if (40<= d["median"] && d["median"] <50) { return "color5"; }
else if (50<= d["median"] && d["median"] <60) { return "color6"; }
else if (60<= d["median"] && d["median"] <70) { return "color7"; }
else if (70<= d["median"] && d["median"] <80) { return "color8"; }
else { return "color9"; }
});
layer1.selectAll(".district")
.data(topojson.feature(rwanda, rwanda.objects.district).features)
.enter().append("path")
.attr("class", "district")
.attr("id", function(d) { return "district" + d.id; })
.attr("d", path);
var顶点=dhs.map(函数(d){return[+d.lon,+d.lat];});
var中值=dhs.map(函数(d){return+d.dhsMedian;});
var max=d3.max(中值,函数(d){返回d;});
var min=d3.min(中位数,函数(d){返回d;});
控制台日志(最大值);
控制台日志(分钟);
var medianScale=d3.scale.linear()
.domain([min,max])
.范围([0,90]);
var voronoi=d3.geom.voronoi()
.clipExtent([0,0],[width,height]);
var voronoied_顶点=voronoi(顶点);
var输入=[];
对于(var i=0;i 如果(0如果您拥有所有voronoi和country形状,请从形状外部的voronoi图中找到边,并找到与country边的交点。您可以尝试使用country边的中点。您可以查看以下示例:
这里,传单和D3.js结合使用
如果您进入,您将在第92ff行找到:
var bounds = map.getBounds(),
...
...
...
drawLimit = bounds.pad(0.4);
filteredPoints = pointsFilteredToSelectedTypes().filter(function(d) {
var latlng = new L.LatLng(d.latitude, d.longitude);
if (!drawLimit.contains(latlng)) { return false };
...
在这里,您可以为窗口应用相应的边界(例如)
希望这能有所帮助。我不确定如何才能准确地处理这个问题。我的难题是如何从国家边界以外的沃罗诺图中找到边。您能再解释一下吗?谢谢!您可能会发现这个示例非常有用: