D3 : 줌 원 포장 SVG 이미지

Question

가 나는 수준의 서클에 맞는 둥근 이미지를 추가하려고 제공되는 이미지 d3: svg image in zoom circle packing

대신이 유래 항목에서 제공하는 코드를 변경 시도 비스 3.

하지만 이미지 직경이 두 배 더 작아 보입니다. 설명하기 위해 여기에 바이올렛이 있습니다 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*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)) + ")"; }) 

변환 있었어야

.attr("width", function(d) { return d.r * k; }) 
    .attr("height", function(d) { return d.r * 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