使用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 + ")。

我认为要解决这个最简单的方法是增加一个父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

没有翻译成比例的一般解可以在这里找到： Scaling Around a Center Point

理念：

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