Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from mbostock/.block
Last active Feb 9, 2016
Embed
What would you like to do?
Voronoi Clipping
license: gpl-3.0

The Voronoi layout, d3.geom.voronoi, provides clipping via the clipExtent property. If no clip extent is specified, the returned shapes cover the area [±1e6, ±1e6].

<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle,
path {
stroke: #000;
}
path {
fill-opacity: .1;
}
path:hover {
fill-opacity: .2;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var padding = 10,
width = 960,
height = 500;
var points = [
[200, 200],
[760, 300]
];
var voronoi = d3.geom.voronoi()
.clipExtent([[padding, padding], [width - padding, height - padding]]);
var color = d3.scale.category10();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("path")
.data(voronoi(points))
.enter().append("path")
.style("fill", function(d, i) { return color(i); })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
svg.selectAll("circle")
.data(points)
.enter().append("circle")
.style("fill", function(d, i) { return color(i); })
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 4.5);
</script>
@vala232

This comment has been minimized.

Copy link

@vala232 vala232 commented Jul 10, 2014

how 2 draw d3.voronoi into google maps or baidu maps?? appreciated~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.