d3.js v4のズーム機能では、私はズームアウトして、チャートをパンの問題が生じていますビューポートの外に出る

Question

は、ここに私のコードです：

var zoom = d3.zoom() 
.scaleExtent([0.3, 10]) 
.on("zoom", zoomed); 

function zoomed() { 
    svg.attr("transform", function(d){ 
     var transform = d3.zoomTransform(this); 
     return transform; 
    }); 
} 

var svg = d3.select("#app") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
    .call(zoom); 

var rect = svg.append("rect") 
    .attr("width", width) 
    .attr("height", height) 
    .style("fill", "none") 
    .style("pointer-events", "all"); 

scaleExtentであれば問題ありません[1,10]。この問題は、xが1未満の場合にのみ発生します。 1より下にズームした後にパンすると、グラフは非常に高い値に変換され、ビューポートから消えます。そしてそれを戻すことは不可能です。

私はapi docsを通過し、解決策を見つけられませんでした。助けてください。 あなたの助けが高く評価されます。

Answer 1

代わりの矩形を保持するグループにパンニングとズーミング。

svg.attr("transform", function(d){ 
    var transform = d3.zoomTransform(this); 
    return transform; 
}); 

は、あなたが（レイヤーを言う）別のグループを追加する場合より良い長方形

function zoomed() { 
    rect.attr("transform", d3.event.transform); 
} 

作業コードhere

それとも

に変換しません。そのグループに長方形を追加します。そして、あなたはズームとパンが、すべてのマウスイベントにレシーバなるように四角形をたくないのでthis

EDIT

のようなグループ（層）に変換を適用します。

は、以下のようなSVGグループに四角形を追加します。

var circle = layer.append("circle") 
    .attr("cx", 100) 
    .attr("cy", 10) 
    .attr("r", 10) 
    .style("fill", "blue") 
    .style("pointer-events", "all"); 

var circle = layer.append("circle") 
    .attr("cx", 100) 
    .attr("cy", 50) 
    .attr("r", 10) 
    .style("fill", "blue") 
    .style("pointer-events", "all"); 


var circle = layer.append("circle") 
    .attr("cx", 300) 
    .attr("cy", 50) 
    .attr("r", 10) 
    .style("fill", "blue") 
    .style("pointer-events", "all"); 

：

var rect = svg.append("rect") 
    .attr("width", width) 
    .attr("height", height) 
    .style("fill", "red") 
    .style("pointer-events", "all"); 

今すぐ

var layer = svg.append("g"); 

では、新しいレイヤーにズームやパンしたいことすべてを追加レイヤーを作成します

ズーム+パンでは、このようなグループにトランスフォームを適用します。

function zoomed() { 
    layer.attr("transform", d3.event.transform); 
} 

コードは、たぶん私は明確な波平here