onHexClick does not seem to fire.

JohnCoene commented 4 years ago

Hi Vasco,

It seems that onHexClick does not fire, unless I am using it wrong: example below.

<head>
  <style> body { margin: 0; } </style>

  <script src="https://cdn.jsdelivr.net/npm/d3"></script>
  <script src="https://cdn.jsdelivr.net/npm/d3-dsv"></script>

  <script src="https://cdn.jsdelivr.net/npm/globe.gl"></script>
  <!--<script src="../../dist/globe.gl.js"></script>-->
</head>

<body>
  <div id="globeViz"></div>

  <script>
    const weightColor = d3.scaleSequentialSqrt(d3.interpolateYlOrRd)
      .domain([0, 1e7]);
    const world = Globe()
      (document.getElementById('globeViz'))
      .globeImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
      .bumpImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png')
      .hexBinPointWeight('pop')
      .hexAltitude(d => d.sumWeight * 6e-8)
      .hexBinResolution(4)
      .hexTopColor(d => weightColor(d.sumWeight))
      .hexSideColor(d => weightColor(d.sumWeight))
      .hexBinMerge(true)
      .onHexClick(function(x){console.log(x)})
      .enablePointerInteraction(false); // performance improvement
    fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/world_population.csv').then(res => res.text())
      .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
      .then(data => world.hexBinPointsData(data));
    // Add auto-rotation
    world.controls().autoRotate = true;
    world.controls().autoRotateSpeed = 0.1;
  </script>
</body>

vasturiano commented 4 years ago

Hi John, that's because of 2 reasons:

.enablePointerInteraction(false) - this is cancelling all click/hover events.
.hexBinMerge(true) - merging the geometries helps with rendering performance but also means they cannot be distinguished after they've been rendered. Therefore if this mode is on, the hover/click events can't determine the data point that's been interacted with and do not trigger.

If you toggle both those properties I believe the click events should start working.

JohnCoene commented 4 years ago

Thank you!

vasturiano / globe.gl

onHexClick does not seem to fire. #3