pdl/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Based on:

SVG semantic zooming

This is intended to demonstrate a conflict between d3 zoom behaviour and bootstrap tooltips.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<title>Zoom + Pan</title>
<style>

svg {
  font: 10px sans-serif;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>

for ( var i = 0; i < 2; i++ ) {
  var width = 960,
      height = 500;

  var randomX = d3.random.normal(width / 2, 80),
      randomY = d3.random.normal(height / 2, 80);

  var data = d3.range(2000).map(function() {
    return [
      randomX(),
      randomY()
    ];
  });

  var x = d3.scale.linear()
      .domain([0, width])
      .range([0, width]);

  var y = d3.scale.linear()
      .domain([0, height])
      .range([height, 0]);

  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g");

  if (i > 0) {
    svg.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom));
  }

  svg.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height);

  var circle = svg.selectAll("circle")
      .data(data)
    .enter().append("circle")
      .attr("r", 2.5)
      .attr("title", "I am a circle!")
      .attr("transform", transform);

  function zoom() {
    circle.attr("transform", transform);
  }

  function transform(d) {
    return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
  }
}

jQuery('svg').each(function() {
  var self = $(this);
  self.tooltip( {
    container : self,
    trigger   : 'click',
    selector  : 'circle',
  } );
})

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
	<title>Zoom + Pan</title>
	<style>

	svg {
	font: 10px sans-serif;
	}

	.overlay {
	fill: none;
	pointer-events: all;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script>

	for ( var i = 0; i < 2; i++ ) {
	var width = 960,
	height = 500;

	var randomX = d3.random.normal(width / 2, 80),
	randomY = d3.random.normal(height / 2, 80);

	var data = d3.range(2000).map(function() {
	return [
	randomX(),
	randomY()
	];
	});

	var x = d3.scale.linear()
	.domain([0, width])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([0, height])
	.range([height, 0]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g");

	if (i > 0) {
	svg.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom));
	}

	svg.append("rect")
	.attr("class", "overlay")
	.attr("width", width)
	.attr("height", height);

	var circle = svg.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("r", 2.5)
	.attr("title", "I am a circle!")
	.attr("transform", transform);

	function zoom() {
	circle.attr("transform", transform);
	}

	function transform(d) {
	return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
	}
	}

	jQuery('svg').each(function() {
	var self = $(this);
	self.tooltip( {
	container : self,
	trigger : 'click',
	selector : 'circle',
	} );
	})

	</script>