Merge pull request #12340 from MoonE/raster-example-tooltips

Fix raster example tooltips

examples/d3.html

@@ -6,7 +6,7 @@ docs: >
   The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a SVG element.
 tags: "d3"
 resources:
-  - https://unpkg.com/d3@5.9.2/dist/d3.js
+  - https://unpkg.com/d3@6.7.0/dist/d3.min.js
   - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>

examples/raster.html

@@ -20,7 +20,7 @@ docs: >
   </p>
 tags: "raster, pixel, maptiler"
 resources:
-  - https://unpkg.com/d3@4.12.0/build/d3.js
+  - https://unpkg.com/d3@6.7.0/dist/d3.min.js
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
     value: Get your own API key at https://www.maptiler.com/cloud/

examples/raster.js

@@ -180,7 +180,8 @@ function plot(resolution, counts, threshold) {
     })
     .attr('height', yScale);
 
-  bar.on('mousemove', function (count, index) {
+  bar.on('mousemove', function () {
+    const index = bar.nodes().indexOf(this);
     const threshold = counts.min + index * counts.delta;
     if (raster.get('threshold') !== threshold) {
       raster.set('threshold', threshold);
@@ -188,25 +189,26 @@ function plot(resolution, counts, threshold) {
     }
   });
 
-  bar.on('mouseover', function (count, index) {
+  bar.on('mouseover', function (event) {
+    const index = bar.nodes().indexOf(this);
     let area = 0;
     for (let i = counts.values.length - 1; i >= index; --i) {
       area += resolution * resolution * counts.values[i];
     }
     tip.html(message(counts.min + index * counts.delta, area));
     tip.style('display', 'block');
-    tip.transition().style({
-      left: chartRect.left + index * barWidth + barWidth / 2 + 'px',
-      top: d3.event.y - 60 + 'px',
-      opacity: 1,
-    });
+    tip
+      .transition()
+      .style('left', chartRect.left + index * barWidth + barWidth / 2 + 'px')
+      .style('top', event.y - 60 + 'px')
+      .style('opacity', 1);
   });
 
   bar.on('mouseout', function () {
     tip
       .transition()
       .style('opacity', 0)
-      .each('end', function () {
+      .on('end', function () {
         tip.style('display', 'none');
       });
   });