RicCheng/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    An extension of this example to include
an HTML5 slider in answer to this question.
forked from bollwyvl's block: Drag + Zoom + Slider

  
## dots.tsv

          
            x
            y

            
              100
              80

            
              80
              69

            
              130
              75

            
              90
              88

            
              110
              83

            
              140
              99

            
              60
              72

            
              40
              42

            
              120
              108

            
              70
              48

            
              50
              56

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

.dot circle {
  fill: lightsteelblue;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.dot circle.dragging {
  fill: red;
  stroke: brown;
}

.axis line {
  fill: none;
  stroke: #ddd;
  shape-rendering: crispEdges;
  vector-effect: non-scaling-stroke;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

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

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

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);

var slider = d3.select("body").append("p").append("input")
  .datum({})
  .attr("type", "range")
  .attr("value", zoom.scaleExtent()[0])
  .attr("min", zoom.scaleExtent()[0])
  .attr("max", zoom.scaleExtent()[1])
  .attr("step", (zoom.scaleExtent()[1] - zoom.scaleExtent()[0]) / 100)
  .on("input", slided);

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 rect = svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none");
//     .style("pointer-events", "all");

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

container.append("g")
    .attr("class", "x axis")
  .selectAll("line")
    .data(d3.range(0, width, 10))
  .enter().append("line")
    .attr("x1", function(d) { return d; })
    .attr("y1", 0)
    .attr("x2", function(d) { return d; })
    .attr("y2", height);

container.append("g")
    .attr("class", "y axis")
  .selectAll("line")
    .data(d3.range(0, height, 10))
  .enter().append("line")
    .attr("x1", 0)
    .attr("y1", function(d) { return d; })
    .attr("x2", width)
    .attr("y2", function(d) { return d; });

d3.tsv("dots.tsv", dottype, function(error, dots) {
  dot = container.append("g")
      .attr("class", "dot")
    .selectAll("circle")
      .data(dots)
    .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .call(drag);
});

function dottype(d) {
  d.x = +d.x;
  d.y = +d.y;
  return d;
}

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  slider.property("value",  d3.event.scale);
}

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.select(this).classed("dragging", true);
}

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

function dragended(d) {
  d3.select(this).classed("dragging", false);
}

function slided(d){
  zoom.scale(d3.select(this).property("value"))
    .event(svg);
}

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.dot circle {
	fill: lightsteelblue;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	.dot circle.dragging {
	fill: red;
	stroke: brown;
	}

	.axis line {
	fill: none;
	stroke: #ddd;
	shape-rendering: crispEdges;
	vector-effect: non-scaling-stroke;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

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

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

	var drag = d3.behavior.drag()
	.origin(function(d) { return d; })
	.on("dragstart", dragstarted)
	.on("drag", dragged)
	.on("dragend", dragended);

	var slider = d3.select("body").append("p").append("input")
	.datum({})
	.attr("type", "range")
	.attr("value", zoom.scaleExtent()[0])
	.attr("min", zoom.scaleExtent()[0])
	.attr("max", zoom.scaleExtent()[1])
	.attr("step", (zoom.scaleExtent()[1] - zoom.scaleExtent()[0]) / 100)
	.on("input", slided);

	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 rect = svg.append("rect")
	.attr("width", width)
	.attr("height", height)
	.style("fill", "none");
	// .style("pointer-events", "all");

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

	container.append("g")
	.attr("class", "x axis")
	.selectAll("line")
	.data(d3.range(0, width, 10))
	.enter().append("line")
	.attr("x1", function(d) { return d; })
	.attr("y1", 0)
	.attr("x2", function(d) { return d; })
	.attr("y2", height);

	container.append("g")
	.attr("class", "y axis")
	.selectAll("line")
	.data(d3.range(0, height, 10))
	.enter().append("line")
	.attr("x1", 0)
	.attr("y1", function(d) { return d; })
	.attr("x2", width)
	.attr("y2", function(d) { return d; });

	d3.tsv("dots.tsv", dottype, function(error, dots) {
	dot = container.append("g")
	.attr("class", "dot")
	.selectAll("circle")
	.data(dots)
	.enter().append("circle")
	.attr("r", 5)
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.call(drag);
	});

	function dottype(d) {
	d.x = +d.x;
	d.y = +d.y;
	return d;
	}

	function zoomed() {
	container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	slider.property("value", d3.event.scale);
	}

	function dragstarted(d) {
	d3.event.sourceEvent.stopPropagation();
	d3.select(this).classed("dragging", true);
	}

	function dragged(d) {
	d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
	}

	function dragended(d) {
	d3.select(this).classed("dragging", false);
	}

	function slided(d){
	zoom.scale(d3.select(this).property("value"))
	.event(svg);
	}

	</script>