Skip to content

Instantly share code, notes, and snippets.

@vwochnik vwochnik/.block
Created Jan 4, 2017

Embed
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 = 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>
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.