vwochnik/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    D3 Zoom Click Bug

Click the blue circle repeatedly. The expected behavior is that it should pulse
on every click. Move the mouse a little bit between each click. It can be noted
that not every click is being interpreted.

  
## draw.js
var width = 500, height = 300,
    radius = 50;

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

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

var zoom = d3.zoom()
  .scaleExtent([1, 5])
  .translateExtent([[0, 0], [width, height]])
  .on("zoom", function() {
    transform = d3.event.transform;
    layer.attr('transform', 'translate('+[transform.x,transform.y]+') scale('+transform.k+')');
  });

svg.call(zoom);

var circle = layer.append("circle")
    .attr("cx", 0.5 * width)
    .attr("cy", 0.5 * height)
    .attr("r", radius)
    .attr("class", "circle")
    .on("click", pulseCircle);

function pulseCircle() {
  circle.transition()
      .duration(250)
      .attrTween("r", function() {
        return function(t) {
          return radius * (0.7 + 0.3 * Math.cos(2.0 * Math.PI * t));
        };
      });
}

## index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>D3 Zoom Click Bug</title>
<style>
  .circle {
    fill: rgba(32, 32, 192, 0.5);
  }
</style>
</head>
<body>
<script src="//d3js.org/d3.v4.js"></script>
<script src="draw.js"></script>
</body>
</html>
	var width = 500, height = 300,
	radius = 50;

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

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

	var zoom = d3.zoom()
	.scaleExtent([1, 5])
	.translateExtent([[0, 0], [width, height]])
	.on("zoom", function() {
	transform = d3.event.transform;
	layer.attr('transform', 'translate('+[transform.x,transform.y]+') scale('+transform.k+')');
	});

	svg.call(zoom);

	var circle = layer.append("circle")
	.attr("cx", 0.5 * width)
	.attr("cy", 0.5 * height)
	.attr("r", radius)
	.attr("class", "circle")
	.on("click", pulseCircle);

	function pulseCircle() {
	circle.transition()
	.duration(250)
	.attrTween("r", function() {
	return function(t) {
	return radius * (0.7 + 0.3 * Math.cos(2.0 * Math.PI * t));
	};
	});
	}
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>D3 Zoom Click Bug</title>
	<style>
	.circle {
	fill: rgba(32, 32, 192, 0.5);
	}
	</style>
	</head>
	<body>
	<script src="//d3js.org/d3.v4.js"></script>
	<script src="draw.js"></script>
	</body>
	</html>