block by mbostock 4237768

Voronoi Clipping

Full Screen

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].

index.html

<!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>