2016-07-13 1 views
0

현재 데이터 시각화에 줌 기능을 구현하려고합니다. 경우에 따라 오류가 발생합니다. "d3.min.js : 1 잡히지 않은 TypeError : t.apply가 함수가 아닙니다."svg 요소를 확대/축소하거나 이동하려고 할 때 때때로 오류가 발생합니다. d3 라이브러리 내의 내부 오류와 같습니다. D3 Zoom TypeError : t.apply가 함수가 아닙니다.

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 버전 최신 실현했다.

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

이 그런 다음 줌 기능과 같은 변수 이름으로 줌이 가능한 g을 만들 : 다음 SVG 루트에 전화 그리고

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

:

+0

귀찮게하지 않으면 매우 어렵습니다. – Cyril

+0

당신 말이 맞습니다. 필자는 오류를 자세히 분석하고 추가 종속성을 가지고 발생합니다. reveal.js의 플러그인으로 zoom.js도 추가했습니다. d3 줌 기능과 zoom.js가 함께 작동하지 않습니다. – Oliver

답변

0

첫째, 당신의 줌 동작을 선언

var zoom_layer=svg.append("g") 
관련 문제