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是{ {1}}圆圈的坐标。

这是一个简单的演示。我生成20个圆圈，并且每2秒钟，我选择一个圆圈（按顺序），以红色突出显示，并翻译整个组以使圆圈居中：

＆＃13;

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)

＆＃13;

svg {
  border: 1px solid gray;
}

＆＃13;

编辑：

点击一下，使用相同的逻辑。这是演示：

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="300"></svg>

＆＃13;

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

＆＃13;

svg {
  border: 1px solid gray;
}

＆＃13;

将一个元素置于svg上

1 个答案: