Skip to content

Instantly share code, notes, and snippets.

@vwochnik vwochnik/.block
Created Jan 4, 2017

What would you like to do?
license: mit

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.

var width = 500, height = 300,
radius = 50;
var svg ="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+')');
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() {
.attrTween("r", function() {
return function(t) {
return radius * (0.7 + 0.3 * Math.cos(2.0 * Math.PI * t));
<!doctype html>
<html lang="ja">
<meta charset="UTF-8">
<title>D3 Zoom Click Bug</title>
.circle {
fill: rgba(32, 32, 192, 0.5);
<script src="//"></script>
<script src="draw.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.