D3 Zoom TypeError：t.applyは関数ではありません

Question

現在、私はデータの視覚化にズーム機能を実装しようとしています。ときどきエラーが発生する "d3.min.js：1キャッチされていないTypeError：t.applyは関数ではありません"ズームまたはsvg要素を移動しようとすると。これはd3ライブラリ内の内部エラーのようです。

var height = $("#content").height(); 
var width = $("#content").width(); 

var svg = d3.select("#content").append("svg") 
      .attr("width", width) 
      .attr("height", height) 
      .attr("class", "svg_canvas") 
      .append("g") 
       .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom)) 
       .attr("transform", "translate(" + (width/2.0) + "," + (height /2.0)+ ")") 
      .append("g") 
       .attr("class", "interaction_group"); 

     zoom_layer = svg; 

     //Overlay for zooming 
     svg.append("rect") 
      .attr("class", "overlay") 
      .attr("width", width) 
      .attr("height", height) 
      .attr("transform", "translate(" + (-width/2.0) + "," + -(height/2.0) + ")"); 

イベントハンドラ "ズーム" は本当に基本的なものです：

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

実装は、最新のD3.js V3バージョンで実現しました。

Answer 1

まず、あなたのズーム動作を宣言します。

var myZoomBehavior=d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom) 

そして、SVGのルートにそれを呼び出す：

var svg = d3.select("#content").append("svg") 
      .attr("width", width) 
      .attr("height", height) 
      .attr("class", "svg_canvas").call(myZoomBehavior) 

その後、あなたのズーム機能と同じ変数名でズーム可能なグラムを作成します。

var zoom_layer=svg.append("g")