pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This version of Mike Bostock's Zoom Center shows the values for translate & scale and allows you to change the center.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>zoom2</title>
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 30px;
}

.axis {
  fill: none;
  stroke: #aaa;
  stroke-width: 1.5px;
}

form, .info {
  position: absolute;
  background-color: white;
  padding: 10px;
  left: 20px;
}

.info {
  top: 4em;
}

form {
  top: 1em;
}

</style>
<body>
<form>
  <input type="radio" name="position" value="[0, 0]"> center: [0, 0]<br>
  <input type="radio" name="position" value="[480, 250]" checked> center: [480, 250]<br>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>

var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var zoom = d3.behavior.zoom()
    .center([0, 0])
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
    .call(zoom);

var info = d3.select("body").append("div")
    .attr("class", "info")

d3.selectAll("form input").on("change", changed);

var rect = svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "white")
    .style("pointer-events", "all");

var container = svg.append("g");

container.append("g")
    .attr("class", "axis")
  .selectAll("circle")
    .data(d3.range(10, width, 10))
  .enter().append("circle")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", function(d) { return d; });

var center = svg.append("circle")
    .style("fill", "red")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", 10);

changed.apply(d3.selectAll("input[checked]").node());

function zoomed() {
  var decimalFormat = d3.format(".3f");
  var integerFormat = d3.format("d");
  info.html("scale:" + decimalFormat(zoom.scale()) + "<br>"
          + "translate: [" + integerFormat(Math.round(zoom.translate()[0])) + ","
                           + integerFormat(Math.round(zoom.translate()[1])) + "]");
  container.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");
}

function changed() {
  zoom.center(JSON.parse(this.value));
  zoomed();
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>zoom2</title>
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 30px;
	}

	.axis {
	fill: none;
	stroke: #aaa;
	stroke-width: 1.5px;
	}

	form, .info {
	position: absolute;
	background-color: white;
	padding: 10px;
	left: 20px;
	}

	.info {
	top: 4em;
	}

	form {
	top: 1em;
	}

	</style>
	<body>
	<form>
	<input type="radio" name="position" value="[0, 0]"> center: [0, 0]<br>
	<input type="radio" name="position" value="[480, 250]" checked> center: [480, 250]<br>
	</form>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script>

	var margin = {top: 0, right: 0, bottom: 0, left: 0},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var zoom = d3.behavior.zoom()
	.center([0, 0])
	.scaleExtent([1, 10])
	.on("zoom", zoomed);

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.right + ")")
	.call(zoom);

	var info = d3.select("body").append("div")
	.attr("class", "info")

	d3.selectAll("form input").on("change", changed);

	var rect = svg.append("rect")
	.attr("width", width)
	.attr("height", height)
	.style("fill", "white")
	.style("pointer-events", "all");

	var container = svg.append("g");

	container.append("g")
	.attr("class", "axis")
	.selectAll("circle")
	.data(d3.range(10, width, 10))
	.enter().append("circle")
	.attr("cx", width / 2)
	.attr("cy", height / 2)
	.attr("r", function(d) { return d; });

	var center = svg.append("circle")
	.style("fill", "red")
	.attr("cx", width / 2)
	.attr("cy", height / 2)
	.attr("r", 10);

	changed.apply(d3.selectAll("input[checked]").node());

	function zoomed() {
	var decimalFormat = d3.format(".3f");
	var integerFormat = d3.format("d");
	info.html("scale:" + decimalFormat(zoom.scale()) + "<br>"
	+ "translate: [" + integerFormat(Math.round(zoom.translate()[0])) + ","
	+ integerFormat(Math.round(zoom.translate()[1])) + "]");
	container.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");
	}

	function changed() {
	zoom.center(JSON.parse(this.value));
	zoomed();
	}

	</script>