d3.js - 当鼠标在svg而不是节点下时如何缩放svg语义图

Question

我正在研究可折叠的树形图缩放。每当我想放大时，我必须将鼠标指针保持在节点（圆圈）上，然后只有我能够放大和缩小。但是当鼠标在图中的任何位置时，它应该能够做到这一点。

缩放函数调用如下：

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1,8]).on("zoom",zoom));

我正在关注此示例链接以进行放大和缩小：http: //jsfiddle.net/6kEpp/37/

任何帮助将非常感激。

Answer 1

只需将矩形附加到 SVG 即可。

svg.append('svg:rect')
    .attr('width', width + margin.right + margin.left)
    .attr('height', height + margin.top + margin.bottom)
    .attr('fill', 'white');