svgのd3ズームテキストをsvgの残りの部分と別の位置に移動させない

Question

svg要素を拡大するにはd3を使用しています。私はsvgをズームインすると、画面の左上に移動しているsvgのテキストがあります。これは、テキストにtransformというプロパティがあるためです。誰もこの問題を矢印dを取得する方法を知っていますか？

SVG

<circle id="c-1" class="st6 big-circle" cx="319.4" cy="277" r="26"/> 
<text transform="matrix(1 0 0 1 313.3557 284.8708)" class="st1 st7 st8">4</text> 

D3/JS

svg = d3.select("svg") 
    var zoom = d3.behavior.zoom() 
    .scaleExtent([1, 5]) 
    .on("zoom", function() { 
     var e = d3.event, 
     tx = Math.min(0, Math.max(e.translate[0])) 
     ty = Math.min(0, Math.max(e.translate[1])); 
     zoom.translate([tx, ty]); 
     svg.selectAll("*").attr("transform", [ 
     "translate(" + [tx, ty] + ")", 
     "scale(" + e.scale + ")" 
     ].join(" ")); 
    }); 
    svg.call(zoom); 
}); 

Answer 1

あなたは

<circle id="c-1" class="st6 big-circle" cx="319.4" cy="277" r="26"/> 
<g> 
    <text transform="matrix(1 0 0 1 313.3557 284.8708)" class="st1 st7 st8">4</text> 
</g> 

... gタグにtext要素をラップし、その後選択することができますtext要素を除くすべてが変換を適用する要素：

svg.selectAll("*:not(text)").attr("transform", [ 
    "translate(" + [tx, ty] + ")", 
    "scale(" + e.scale + ")" 
    ].join(" "));