score:3

Accepted answer

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>


Related Query