<!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.invert() Function</
h3
>
<
div
id
=
"GFG"
></
div
>
<
script
>
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 360 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var svg = d3.select("#GFG")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + ", " + margin.top + ")");
"holtzy/D3-graph-gallery/master/DATA/iris.csv"
d3.csv(myURL, function(data) {
var x = d3.scaleLinear()
.domain([4, 8])
.range([ 0, width ]);
var xAxis = svg.append("g")
.attr("transform", "translate(0, " + height + ")")
.call(d3.axisBottom(x));
var y = d3.scaleLinear()
.domain([0, 9])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
var clip = svg.append("defs")
.append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width )
.attr("height", height )
.attr("x", 0)
.attr("y", 0);
var color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica" ])
.range([ "green", "red", "blue"])
var brush = d3.brushX()
.extent( [ [0, 0], [width, height] ] )
.on("end", updateChart)
var scatter = svg.append('g')
.attr("clip-path", "url(#clip)")
scatter.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) {
return x(d.Sepal_Length); } )
.attr("cy", function (d) {
return y(d.Petal_Length); } )
.attr("r", 8)
.style("fill", function (d) {
return color(d.Species) } )
.style("opacity", 0.5)
scatter.append("g")
.attr("class", "brush")
.call(brush);
var idleTimeout
function idled() { idleTimeout = null; }
function updateChart() {
extent = d3.event.selection
if(!extent){
if (!idleTimeout)
return idleTimeout =
setTimeout(idled, 350);
x.domain([ 4, 8])
}
else{
x.domain([ x.invert(extent[0]),
x.invert(extent[1]) ])
scatter.select(".brush")
.call(brush.move, null)
}
xAxis.transition()
.duration(1000)
.call(d3.axisBottom(x))
scatter.selectAll("circle")
.transition().duration(1000)
.attr("cx", function (d) {
return x(d.Sepal_Length);
} )
.attr("cy", function (d) {
return y(d.Petal_Length);
} )
}
})
</
script
>
</
center
>
</
body
>
</
html
>