Menu

Voronoi.svelte component

Generates a voronoi layer using d3-delauney.

Param Default Required Description
stroke String None
no
An optional stroke color, which is likely only useful for testing to make sure the shapes drew correctly.

Used in these examples:

<!--
  @component
  Generates a voronoi layer using [d3-delauney](https://github.com/d3/d3-delauney).
 -->
<script>
  import { getContext, createEventDispatcher } from 'svelte';
  import { uniques } from 'layercake';
  import { Delaunay } from 'd3-delaunay';

  const { data, xGet, yGet, width, height } = getContext('LayerCake');

  /** @type {String} [stroke] – An optional stroke color, which is likely only useful for testing to make sure the shapes drew correctly. */
  export let stroke = undefined;

  let dispatcher = createEventDispatcher();

  function log (point) {
    console.log(point, point.data);
    dispatcher('voronoi-mouseover', point);
  }

  $: points = $data.map(d => {
    const point = [$xGet(d), $yGet(d)];
    point.data = d;
    return point;
  });

  $: uniquePoints = uniques(points, d => d.join(), false);

  $: voronoi = Delaunay.from(uniquePoints).voronoi([0, 0, $width, $height]);
</script>

<style>
  .voronoi-cell {
    fill: none;
    stroke: none;
    pointer-events: all;
    outline: none;
  }

  /* Useful to testing but you'll want to disable this for production */
  .voronoi-cell:hover {
    stroke: #333 !important;
    stroke-width: 3px;
  }
</style>

{#each uniquePoints as point, i}
  <path
    style:stroke
    class="voronoi-cell"
    d={voronoi.renderCell(i)}
    on:mouseover="{() => { log(point) }}"
    on:focus="{() => { log(point) }}"
  ></path>
{/each}