<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
script
>
<
style
>
circle {
opacity: 0.7;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
Geeksforgeeks
</
h1
>
<
h3
>D3.js | zoom.invertX() Function</
h3
>
<
svg
></
svg
>
<
script
>
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random()
* (max - min + 1)) + min;
}
function mydata(transform, extent,
translateExtent) {
var dx0 = transform.invertX(extent[0][0])
- translateExtent[0][0],
dy0 = transform.invertY(extent[0][1])
- translateExtent[0][1],
dx1 = transform.invertX(extent[1][0])
- translateExtent[1][0],
dy1 = transform.invertY(extent[1][1])
- translateExtent[1][1];
return transform.translate(
dx1 > dx0 ? (dx1 + dx0) / 2 :
Math.min(0, dx0) || Math.max(0, dx1),
dy1 > dy0 ? (dy1 + dy0) / 2 :
Math.min(0, dy0) || Math.max(0, dy1)
);
}
var dimension = document.body
.getBoundingClientRect();
var radius = 10;
var svg = d3.select('svg');
var data = d3.range(0, 50).map(function () {
return {
x: getRandom(radius, 400 - radius),
y: getRandom(radius, 200 - radius)
}
});
var zoom = d3.zoom()
.constrain(mydata)
.on('zoom', function () {
canvas.attr('transform', d3.event.transform);
})
var canvas = svg.attr('width', 400)
.attr('height', 200)
.call(zoom)
.insert('g', ':first-child');
canvas.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('r', radius)
.attr('cx', function (d) {
return d.x;
})
.attr('cy', function (d) {
return d.y;
})
.style('fill', function () {
return d3.schemeCategory10[getRandom(0, 5)]
});
</
script
>
</
center
>
</
body
>
</
html
>