docs: replace d3-zoom with d3fc-domain-zoom

d3fc · Oct 14, 2020 · 344b468 · 344b468
1 parent 94445e5
commit 344b468
Show file tree

Hide file tree

Showing 7 changed files with 5 additions and 18 deletions.
diff --git a/examples/chart-zoom/README.md → examples/chart-d3-zoom/README.md b/examples/chart-zoom/README.md → examples/chart-d3-zoom/README.md
diff --git a/examples/chart-zoom/__tests__/index.js → examples/chart-d3-zoom/__tests__/index.js b/examples/chart-zoom/__tests__/index.js → examples/chart-d3-zoom/__tests__/index.js
diff --git a/examples/chart-zoom/index.html → examples/chart-d3-zoom/index.html b/examples/chart-zoom/index.html → examples/chart-d3-zoom/index.html
diff --git a/examples/chart-zoom/index.js → examples/chart-d3-zoom/index.js b/examples/chart-zoom/index.js → examples/chart-d3-zoom/index.js
diff --git a/examples/chart-zoom/screenshot.png → examples/chart-d3-zoom/screenshot.png b/examples/chart-zoom/screenshot.png → examples/chart-d3-zoom/screenshot.png
diff --git 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
@@ -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/">