score:3

As mentioned in the comments, this is probably not what you want, but it is in my opinion the simplest and cleanest approach: move the circle instead. Or, if you have several circles, move their container, that is, the `<g>` element.

The math for translating the group is simple:

``````.attr("transform", "translate(" + (w/2 - pX) + "," + (h/2 - pY) + ")")
``````

Where `w` is the width of the SVG, `h` is the height, `pX` is the `x` coordinate of the circle and `pY` is the `y` coordinate of the circle.

Here is a simple demo. I'm generating 20 circles and, every 2 seconds, I'm choosing one of the circles (in sequence), which is highlighted in red, and translating the whole group to make that circle centred:

``````var svg = d3.select("svg");
var g = svg.append("g")
var circles = g.selectAll(null)
.data(d3.range(20).map(function() {
return {
x: Math.random() * 500,
y: Math.random() * 300
}
}))
.enter()
.append("circle")
.attr("cx", function(d) {
return d.x
})
.attr("cy", function(d) {
return d.y
})
.attr("r", 10)
.style("fill", "lime");

var counter = 0;

var timer = d3.interval(function() {
if (counter === 19) {
timer.stop()
}
var thisCircle = circles.filter(function(d, i) {
return i === counter;
});
var position = thisCircle.datum();
g.transition()
.duration(1500)
.attr("transform", "translate(" + (250 - position.x) + "," + (150 - position.y) + ")");
thisCircle.style("stroke", "red").style("stroke-width", 4)
.transition()
.delay(2000)
.duration(0)
.style("stroke", "none")
counter++;
}, 2000)``````
``````svg {
border: 1px solid gray;
}``````
``````<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="300"></svg>``````

EDIT:

For a click, use the same logic. Here is the demo:

``````var svg = d3.select("svg");
var g = svg.append("g")
var circles = g.selectAll(null)
.data(d3.range(20).map(function() {
return {
x: Math.random() * 500,
y: Math.random() * 300
}
}))
.enter()
.append("circle")
.attr("cx", function(d) {
return d.x
})
.attr("cy", function(d) {
return d.y
})
.attr("r", 10)
.style("fill", "lime")
.style("cursor", "pointer");

circles.on("click", function(d) {
g.transition()
.duration(1000)
.attr("transform", "translate(" + (250 - d.x) + "," + (150 - d.y) + ")")
})``````
``````svg {
border: 1px solid gray;
}``````
``````<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="300"></svg>``````