From 344b468a59bc4b939a99a3dda0b0ff0d0becc9f6 Mon Sep 17 00:00:00 2001
From: Chris Price <cprice@scottlogic.co.uk>
Date: Fri, 9 Oct 2020 16:47:31 +0100
Subject: [PATCH] docs: replace d3-zoom with d3fc-domain-zoom

---
 .../{chart-zoom => chart-d3-zoom}/README.md   |   0
 .../__tests__/index.js                        |   0
 .../{chart-zoom => chart-d3-zoom}/index.html  |   0
 .../{chart-zoom => chart-d3-zoom}/index.js    |   0
 .../screenshot.png                            | Bin
 examples/diamonds/index.js                    |  19 +++---------------
 site/index.html                               |   4 ++--
 7 files changed, 5 insertions(+), 18 deletions(-)
 rename examples/{chart-zoom => chart-d3-zoom}/README.md (100%)
 rename examples/{chart-zoom => chart-d3-zoom}/__tests__/index.js (100%)
 rename examples/{chart-zoom => chart-d3-zoom}/index.html (100%)
 rename examples/{chart-zoom => chart-d3-zoom}/index.js (100%)
 rename examples/{chart-zoom => chart-d3-zoom}/screenshot.png (100%)

diff --git a/examples/chart-zoom/README.md b/examples/chart-d3-zoom/README.md
similarity index 100%
rename from examples/chart-zoom/README.md
rename to examples/chart-d3-zoom/README.md
diff --git a/examples/chart-zoom/__tests__/index.js b/examples/chart-d3-zoom/__tests__/index.js
similarity index 100%
rename from examples/chart-zoom/__tests__/index.js
rename to examples/chart-d3-zoom/__tests__/index.js
diff --git a/examples/chart-zoom/index.html b/examples/chart-d3-zoom/index.html
similarity index 100%
rename from examples/chart-zoom/index.html
rename to examples/chart-d3-zoom/index.html
diff --git a/examples/chart-zoom/index.js b/examples/chart-d3-zoom/index.js
similarity index 100%
rename from examples/chart-zoom/index.js
rename to examples/chart-d3-zoom/index.js
diff --git a/examples/chart-zoom/screenshot.png b/examples/chart-d3-zoom/screenshot.png
similarity index 100%
rename from examples/chart-zoom/screenshot.png
rename to examples/chart-d3-zoom/screenshot.png
diff --git a/examples/diamonds/index.js b/examples/diamonds/index.js
index e866f928b..a123933a6 100644
--- a/examples/diamonds/index.js
+++ b/examples/diamonds/index.js
@@ -6,15 +6,9 @@ d3.tsv('diamond-data.tsv', d => ({
     const yExtent = fc.extentLinear().accessors([d => d.price]);
 
     const xScale = d3.scaleLog().domain(xExtent(data));
-    const xScaleCopy = xScale.copy();
     const yScale = d3.scaleLog().domain(yExtent(data));
-    const yScaleCopy = yScale.copy();
 
-    const zoom = d3.zoom().on('zoom', event => {
-        xScale.domain(event.transform.rescaleX(xScaleCopy).domain());
-        yScale.domain(event.transform.rescaleY(yScaleCopy).domain());
-        render();
-    });
+    const zoom = fc.zoom().on('zoom', render);
 
     const gridlines = fc.annotationSvgGridline();
 
@@ -23,10 +17,7 @@ d3.tsv('diamond-data.tsv', d => ({
         .crossValue(d => d.carat)
         .mainValue(d => d.price)
         .size(d =>
-            Math.pow(
-                Math.max(2, xScaleCopy(d.carat + 0.01) - xScaleCopy(d.carat)),
-                2
-            )
+            Math.pow(Math.max(2, xScale(d.carat + 0.01) - xScale(d.carat)), 2)
         )
         .type(d3.symbolSquare)
         .defined(() => true)
@@ -67,11 +58,7 @@ d3.tsv('diamond-data.tsv', d => ({
                 .enter()
                 .select('.webgl-plot-area')
                 .raise()
-                .on('measure.range', event => {
-                    xScaleCopy.range([0, event.detail.width]);
-                    yScaleCopy.range([event.detail.height, 0]);
-                })
-                .call(zoom);
+                .call(zoom, xScale, yScale);
         });
 
     function render() {
diff --git a/site/index.html b/site/index.html
index 715410325..7aaa5429c 100644
--- a/site/index.html
+++ b/site/index.html
@@ -112,8 +112,8 @@ <h2>Featured Examples</h2>
                                 <img src="https://d3fc.io/examples/brush-zoom/screenshot.png" />
                                 Brush Zoom
                         </a>
-                        <a href="https://d3fc.io/examples/chart-zoom/">
-                                <img src="https://d3fc.io/examples/chart-zoom/screenshot.png" />
+                        <a href="https://d3fc.io/examples/chart-d3fc-zoom/">
+                                <img src="https://d3fc.io/examples/chart-d3fc-zoom/screenshot.png" />
                                 Chart Zoom
                         </a>
                         <a href="https://d3fc.io/examples/stacked-bar-chart/">