-
Notifications
You must be signed in to change notification settings - Fork 190
/
index.js
52 lines (44 loc) · 1.27 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// create some test data
const prng = d3.randomNormal();
const data = d3.range(1e3).map(d => ({
x: prng(),
y: prng()
}));
const x = d3.scaleLinear().domain([-5, 5]);
const y = d3.scaleLinear().domain([-5, 5]);
// secondary scales for the purposes of computing the zoom
const x2 = x.copy();
const y2 = y.copy();
const area = fc
.seriesCanvasPoint()
.crossValue(d => d.x)
.mainValue(d => d.y)
.size(4);
// create a d3-zoom that handles the mouse / touch interactions
const zoom = d3.zoom().on('zoom', event => {
// update the scale used by the chart to use the updated domain
x.domain(event.transform.rescaleX(x2).domain());
y.domain(event.transform.rescaleY(y2).domain());
render();
});
// the chart!
const chart = fc
.chartCartesian(x, y)
.chartLabel('Canvas Zoom 1,000 Points')
.canvasPlotArea(area)
.decorate(sel => {
// add the zoom interaction on the enter selection
sel.enter()
.select('.plot-area')
.on('measure.range', event => {
x2.range([0, event.detail.width]);
y2.range([event.detail.height, 0]);
})
.call(zoom);
});
function render() {
d3.select('#zoom-chart')
.datum(data)
.call(chart);
}
render();