使用d3 SVG Scale而不翻譯

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

這里可以找到無需翻譯的一般解決方案： 在中心點周圍縮放

理念：

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