javascript - 在 svg 上居中一个元素

Question

我在 D3.js 中得到了这个 svg，大小为 (1000,1000)，并且在该 svg 上的某个随机位置有一个圆圈，例如 (100,200)。

现在，我想以某种方式移动我的 svg，圆圈位于我的 svg 的中间/中心，这意味着在 (500,500)。但是我想用一个函数来解决它，它允许我为每个随机定位的圆做这个。

有人可以帮忙吗？ SVG 的 svg 左上角当前位于 (0,0)。因此，例如使用 .attr("transform", "translate(10,10)"); 移动时，SVG 的左上角位于 (10,10)。我还考虑过像这个例子中那样使用质心函数: https://bl.ocks.org/mbostock/2206529

但我不知道这是否只适用于世界地图。

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)");
}

Answer 1

如评论中所述，这可能不是您想要的，但在我看来这是最简单、最干净的方法:改为移动圆圈。或者，如果您有多个圆圈，请移动它们的容器，即 <g>元素。

翻译组的数学很简单:

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

在哪里w是 SVG 的宽度，h是高度，pX是 x圆的坐标和pY是 y圆的坐标。

这是一个简单的演示。我生成了 20 个圆圈，并且每隔 2 秒，我选择其中一个圆圈(按顺序)，以红色突出显示，然后平移整个圆圈以使该圆圈居中:

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>

编辑:

对于点击，使用相同的逻辑。这是演示:

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>