グラフをプロットエリアの範囲外にズームします。

Question

グラフに問題があります。ズームすると、線はキャンバス領域の端とx/y軸の上を移動します。私はclippathを追加しようとしましたが、うまくいかないようです。私がデバッガでDOMを調べると、私はclippathの四角形が正確に必要な位置にあることがわかります。

//The canvasGroup is the area between the axis 
var clipGroup = canvasGroup.append("clipPath") 
       .attr("id", "canvasGroup-clipPath"); 

var clipRect = clipGroup.append("rect") 
       .attr("width", width) 
       .attr("height", height);    

//Function that does the zooming 
function doZoom() 
{ 
    paths.forEach(function(path) 
    {    
     path.attr("transform", d3.event.transform); 
    }); 

    gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale))); 
    gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale))); 
} 

var zoom = d3.zoom() 
      .scaleExtent([1, 5]) 
      .translateExtent([[0, 0], [width, height]]) 
      .on("zoom", doZoom); 

//Register the event listener    
canvasGroup.call(zoom);  

//now loop over the data sets and plot each one 
//For brevity, I'm skipping the loop and only showing the call to create the line 
var path = canvasGroup.append("path") 
      .attr("clip-path", "url(#canvasGroup-clipPath)")  
      .attr("fill", "steelblue")     
      .attr("class", "line") 
      .attr("id", lineId + "-line") 
      .style("stroke", lineColor) 
      .style("stroke-width", 1) 
      .style("fill", "none");      

paths.push(path); 
path.attr("d", function(d) { return plotline(i)}); 

以下はその外観です。ズーム前 ： ズーム後：

Answer 1

問題は、あなたのデータを表すパス上のクリッピングパスを設定することによって引き起こされます。クリッピングパスを適用する場合、ブラウザーは<clipPath>要素の内容に使用する座標システムを決定する必要があります。

UserSpaceOnUseで
<clippath>要素の内容が、現在のユーザーの値を表す<clippath>要素が参照される時場所に座標系（すなわち、これはuserSpaceOnUseデフォルトはclipPathUnits属性によって制御され、clip-path属性を介して<clippath>要素を参照する要素のユーザー座標系）。

doZoom()関数でパスを変換するとき、実際にパスの新しい座標系を確立しています。そして、パス自体を描くこととは別に、この座標系を使用してクリッピングパスの位置と寸法を計算します。したがって、ズームの振る舞いに応じてパスを変換することで、クリッピングパスに同じ変換を適用して、目的の位置から移動させます。

属性を他の有効な値objectBoundingBoxに設定するのは魅力的ですが、これは、問題をさらに複雑にするので、このケースでは望んでいない可能性があります。この値を設定する場合、<clipPath>のコンテンツの位置と長さを境界ボックスのfractionsと指定する必要があります。

これを知っていると、はるかに簡単な解決策があります。ズーミング中に変換されない要素には、clip-pathを適用するだけでよい。親グループ。あなた `clipPath`がどのように

// Set the clipping path on the parent group. 
canvasGroup.attr("clip-path", "url(#canvasGroup-clipPath)")  

// Append the path to the group as before. 
var path = canvasGroup.append("path") 
       .attr("fill", "steelblue")     
       .attr("class", "line") 
       // ...