Question

目前，我正在尝试为我的数据可视化实现缩放功能。当我尝试缩放或移动svg元素时，有时会发生错误“d3.min.js：1 Uncaught TypeError：t.apply不是函数”。它看起来像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 ) + ")");

事件处理程序“zoom”非常基本：

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 root：

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

然后使用与缩放功能相同的变量名创建zoomable g：

var zoom_layer=svg.append("g")

D3 Zoom TypeError：t.apply不是函数

1 个答案: