번역없이 d3 SVG 스케일 사용

Question

SVG 및 d3에서 scale() 변환을 사용하려고합니다. 나는 그것이 좌표 스케일을 증가시킴으로써 작동하는 것을 이해하지만 그것은 또한 나의 목표를 번역하는 것으로 보인다. (100,100)에 사각형이 있고 스케일 (2)을 할 때 사각형은 크기가 두 배가되고 (0,0)로 이동합니다. 스케일링하는 동안 (100,100)에서 (0,0)으로 이동하는 것을 멈추게하려면 어떻게해야합니까?

var mysvg = d3.select("#viz") 
     .append("svg") 
     .attr("width", 500) 
     .attr("height", 500) 
     .attr("class","mylist"); 

    var node = mysvg.selectAll("g.node") 
     .data(mydata) 
     .enter().append("g") 
     .attr("class","node") 
     .attr("transform", function(d) { return "translate(" + d.xpos + "," + d.ypos + ")"; });   

    node.append("rect") 
     .attr("width",tileWidth) 
     .attr("height",tileWidth) 
     .attr("fill","orange") 
     .attr("rx",10) 
     .attr("ry",10); 

    node.append("text") 
     .attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileWidth/2 +")" }) 
     .attr("text-anchor", "middle") 
     .attr("dy", ".3em") 
     .attr("font-family","serif") 
     .text(function(d) { return d.symbol; }); 

    node.on("mouseover",function(){ d3.select(this).transition().attr("transform","scale(1.2)") }); 
    node.on("mouseout",function(){ d3.select(this).transition().attr("transform","scale(1)") }); 

Answer 1

귀하의 mouseover 및 mouseout 이벤트가 원래 translate(" + d.xpos + "," + d.ypos + ")을 재정의 : 다음은 내 코드입니다. Scaling Around a Center Point을 :

나는이 문제를 해결하는 가장 쉬운 방법은 부모 g을 추가하고 같은

var mysvg = d3.select("#viz") 
     .append("svg") 
     .attr("width", 500) 
     .attr("height", 500) 
     .attr("class","mylist"); 

    var parent = mysvg.selectAll("g.parent") 
     .data(mydata) 
     .enter().append("g") 
     .attr("class","parent") 
     .attr("transform", function(d) { return "translate(" + d.xpos + "," + d.ypos + ")"; });  

    var node = mysvg.selectAll("g.parent") 
     .enter().append("g") 
     .attr("class","node") 
    });   

    node.append("rect") 
     .attr("width",tileWidth) 
     .attr("height",tileWidth) 
     .attr("fill","orange") 
     .attr("rx",10) 
     .attr("ry",10); 

    node.append("text") 
     .attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileWidth/2 +")" }) 
     .attr("text-anchor", "middle") 
     .attr("dy", ".3em") 
     .attr("font-family","serif") 
     .text(function(d) { return d.symbol; }); 

    node.on("mouseover",function(){ d3.select(this).transition().attr("transform","scale(1.2)") }); 
    node.on("mouseout",function(){ d3.select(this).transition().attr("transform","scale(1)") }); 

Answer 2

번역없이 확장 할 수있는 일반적인 해결책은 여기에서 찾을 수 있습니다 ...로, 그 번역 될 것이라고 생각

아이디어 :

translate(-centerX*(factor-1), -centerY*(factor-1)) 
scale(factor)