当鼠标在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');