d3: Изображение в формате SVG в увеличении окружности упаковке бис

Question

Я попытался изменить код, предоставленного этой 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; }) 
} 

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

это должно было быть (если честно я не» Понимаете, почему вы сделали dr/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