d3：缩放圆包装之二中的 svg 图像

【问题标题】：d3: svg image in zoom circle packing bisd3：缩放圆包装之二中的 svg 图像
【发布时间】：2017-02-23 01:29:00
【问题描述】：

我已尝试更改此 stackoverflow 主题 d3: svg image in zoom circle packing 提供的代码

我尝试添加适合 3 级圆圈的圆形图像，而不是提供的图像。

但图像直径似乎总是比 cricle 小一倍。为了说明，这里是提琴https://jsfiddle.net/5qmmL8jo/

我知道解决方案在 zoomTo 函数的底部某处，但我不明白如何更改它。你能帮忙吗？

function zoomTo(v) {
  var k = diameter / v[2];
  view = v;
  node.attr("transform", function(d) {
    return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
  });
  circle.attr("r", function(d) {
    return d.r * k;
  });
  image
    .attr("transform", function(d) {
      console.log(d.r);
      return "translate(" + (((d.x - v[0]) * (k)) - ((d.r / 2) * k)) + "," + (((d.y - v[1]) * (k)) - ((d.r / 2) * k)) + ")";
    })
    .attr("width", function(d) {
      return d.r * k;
    })
    .attr("height", function(d) {
      return d.r * k;
    })
}

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

您非常接近，您发现问题出在 zoomTo 函数中。

所以首先改变，而不是这样：

.attr("width", function(d) { return d.r * k; })
.attr("height", function(d) { return d.r * k; })

应该是的

.attr("width", function(d) { return d.r * k*2; }) //width should be  double of the radius
.attr("height", function(d) { return d.r * k*2 }) //height should be double of the radius.

在变换中

.attr("transform", function(d) {
  return "translate(" + (((d.x - v[0]) * (k)) - ((d.r / 2) * k)) + "," + (((d.y - v[1]) * (k)) - ((d.r / 2) * k)) + ")";
})

应该是（坦率地说，我不明白你为什么做了 d.r/2，圆半径的一半）。

.attr("transform", function(d) {
  console.log(d.r);
  return "translate(" + (((d.x - v[0]) * (k)) - ((d.r) * k)) + "," + (((d.y - v[1]) * (k)) - ((d.r) * k)) + ")";
})

工作代码here

【讨论】：