svg - Zoomable Forced Layout - SVG rect を固定位置にする

Question

特定の幅と高さの長方形内に制限された強制レイアウトがあります。グラフの svg に自動サイズ変更プロパティと共にズーム機能を追加して、マウス ロールでズームインできるようにしました。

問題は次のとおりです。「rect」変数を介して追加した四角形はドラッグ可能になり（理由はわかりません）、ズームすると、四角形自体もズームインします...これは後でありません。

要約:

A. 長方形をその場で固定する必要があります (ドラッグ可能なオブジェクトのように振る舞うべきではありません) B. 長方形の幅を固定したまま、レイアウト自体をズームする必要があります。

var width = 1024;
var height = 768;

var xx = d3.scale.sqrt().domain([0,1000]).range([0, width]);
var yy = d3.scale.sqrt().domain([0,1000]).range([0, height]);

var svg = d3.select('#chart').append("svg")
            .attr("viewBox", "0 0 " + width + " " + height )
            .attr("preserveAspectRatio", "xMidYMid meet")
            .attr("pointer-events", "all")
                .style("fill", '#000000')
            .append("g")
            .attr("transform", "translate(" + 0 + "," + 0 + ")")
            .call(d3.behavior.zoom().x(xx).y(yy).scaleExtent([1, 3]).on("zoom", redraw)).append('g');


 rect = svg.append('rect')
           .attr('width', width+10)
           .attr('height', height+10)
       .attr("transform", "translate(" + 0 + "," + 0 + ")")
           .attr('fill', '#000000');


 function redraw() {
          svg.attr("transform", "translate(" + d3.event.translate + ")"
          + "scale(" + d3.event.scale + ")");
       }

どんな助けでも素晴らしいでしょう。ありがとう。