d3: svg image in zoom circle packing bis

Question

I have tried to change code provided by this stackoverflow topic d3: svg image in zoom circle packing

Instead of the image provided I tried to add a round image that fits to circles of level 3.

But the image diameter seems alwas twice smaller as the cricle one. In order to illustrate, here is the fiddle https://jsfiddle.net/5qmmL8jo/

I understand that the solution is somewhere in the bottom part of the zoomTo function, but I do not understand how to change it. Can you please help ?

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

score 1 · Answer 1 · edited Aug 03 '18 at 17:48

You are very close, in your finding that the problem is in the zoomTo function.

So first change, instead of this:

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

It should have been

.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.

And in the transform

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

it should have been (frankly i don't understand why you have done d.r/2, half of radius of circle).

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

working code here

d3: svg image in zoom circle packing bis

1 Answers1