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)
:
귀찮게하지 않으면 매우 어렵습니다. – Cyril
당신 말이 맞습니다. 필자는 오류를 자세히 분석하고 추가 종속성을 가지고 발생합니다. reveal.js의 플러그인으로 zoom.js도 추가했습니다. d3 줌 기능과 zoom.js가 함께 작동하지 않습니다. – Oliver