Voronoi clipCells() end[1] null Example by micahstubbs

an effort at a minimal example of the Cannot read property '0' of null in clipCells() error message described in d3-voronoi github issue 16

this example renders the Voronoi example as expected, and does not reproduce the error.

strangely, when I pass the same data to d3.voronoi() inside my larger app elsewhere, I experience the error.

the code for the d3-voronoi-scatterplot chart plugin is at https://github.com/micahstubbs/d3-voronoi-scatterplot

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<title>Scatterplot with Distance-Limited Voronoi</title>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
<script src='d3-voronoi-scatterplot.js'></script>
<link href='//fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style>
  body {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #525252;
    text-align: center;
  }
  html, body { 
    width:auto; 
    height:auto; 
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #B3B3B3;
    shape-rendering: crispEdges;
  }
  .axis text {
    font-size: 10px;
    fill: #6B6B6B;
  }
</style>
</head>
<body>
<div>
  <div id='chart'></div>
</div>
<script lang='babel' type='text/babel'>
  d3.csv('data.csv', (error, data) => {
    const tooltipColumns = [
      {
        name: 'x',
        type: 'numeric',
        format: ',.4f'
      },
      {
        name: 'y',
        type: 'numeric',
        format: ',.4f'
      }
    ];

    const numericColumns = [
      'x',
      'y'
    ];

    const marks = {
      r: 2,
      fillOpacity: 0.3,
      colors: [
        '#1f78b4',
        '#ff7f00',
        '#33a02c',
        '#e31a1c',
        '#6a3d9a',
        '#b15928',
        '#a6cee3',
        '#fdbf6f',
        '#b2df8a',
        '#fb9a99',
        '#cab2d6',
        '#ffff99'
      ]
    };

    const categoricalColumns = [];

    const options = {
      width: 960,
      xVariable: 'x',
      yVariable: 'y',
      idVariable: undefined,
      tooltipColumns,
      numericColumns,
      xLabelDetail: undefined,
      wrapperId: 'voronoiExample',
      wrapperLabel: 'Voronoi clipCells() end[1] null Example',
      dependent: true,
      globalExtents: undefined,
      marks,
      categoricalColumns
    }

    d3VoronoiScatterplot.drawVoronoiScatterplot('#chart', data, options);
  })
</script>
</body>
</html>

d3-voronoi-Edge-createEdge-modified.js

function createEdge(left, right, v0, v1) {
  var edge = [null, null];
  var index = edges.length;
      // index = edges.push(edge) - 1;
  edges.push(edge);
  edge.left = left;
  edge.right = right;
  if (v0) setEdgeEnd(edge, left, right, v0);
  if (v1) setEdgeEnd(edge, right, left, v1);
  cells[left.index].halfedges.push(index);
  cells[right.index].halfedges.push(index);
  return edge;
}