Skip to content

Instantly share code, notes, and snippets.

@rutgerhofste

rutgerhofste/index.html

Last active February 1, 2018 11:05
Show Gist options
  • Save rutgerhofste/5bd5b06f7817f0ff3ba1daa64dee629d to your computer and use it in GitHub Desktop.
Save rutgerhofste/5bd5b06f7817f0ff3ba1daa64dee629d to your computer and use it in GitHub Desktop.
Download ZIP
D3 V4 zoom with Axis explained
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<body></body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="script.js"></script>
Raw
script.js
var svgWidth = 800;
var svgHeight = 300;
var margin = {top: 30, right: 40, bottom: 50, left: 60};
var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;
var originalCircle = {"cx" : -150 ,
"cy" : -15 ,
"r" : 20};
var svgViewport = d3.select("body")
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight)
.style("background", "red");
// create scale objects
var xAxisScale =d3.scaleLinear()
.domain([-200,-100])
.range([0,width]);
var yAxisScale = d3.scaleLinear()
.domain([-10,-20])
.range([height,0]);
// create axis objects
var xAxis = d3.axisBottom(xAxisScale);
var yAxis = d3.axisLeft(yAxisScale);
// Zoom Function
var zoom = d3.zoom()
.on("zoom", zoomFunction);
// Inner Drawing Space
var innerSpace = svgViewport.append("g")
.attr("class", "inner_space")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
// append some dummy data
var circles = innerSpace.append('circle')
.attr("id","circles")
.attr("cx", xAxisScale(originalCircle.cx))
.attr("cy", yAxisScale(originalCircle.cy))
.attr('r', originalCircle.r)
// Draw Axis
var gX = innerSpace.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var gY = innerSpace.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
// append zoom area
var view = innerSpace.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.call(zoom)
function zoomFunction(){
// create new scale ojects based on event
var new_xScale = d3.event.transform.rescaleX(xAxisScale)
var new_yScale = d3.event.transform.rescaleY(yAxisScale)
console.log(d3.event.transform)
// update axes
gX.call(xAxis.scale(new_xScale));
gY.call(yAxis.scale(new_yScale));
// update circle
circles.attr("transform", d3.event.transform)
};
Raw
style.css
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment