CODEWITHSUNDEEP
javascripthtmlcssd3.jssvg
Suppe
Suppe

Reputation: 189

Center a element on the svg

I got this svg in D3.js with the size of (1000,1000) and a circle on that svg at a certain random position for example (100,200).

Now, i want to shift my svg in a way, that the circle is at the middle/center of my svg, that means at (500,500). But I want to solve it with a function, that allows me to do this for a every random positioned circle.

Is there someone who can help? The svg upper left point of the SVG is currently at (0,0). So when move for example with .attr("transform", "translate(10,10)");, then the upper left point of the SVG with be at (10,10). Also i thought about using the centroid function like in this example: https://bl.ocks.org/mbostock/2206529

But i don't know if that only works for world maps.

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

function move(){
    svg.transition()
        .duration(750)
        .attr("transform", "translate(0,0)");
}

Upvotes: 1

Views: 940

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

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>

Upvotes: 3

Related Questions