如何为图表D3 JS添加缩放

Question

我有这个DEMO ，我正尝试使用以下示例中的代码添加缩放功能：

var zoom = d3.behavior.zoom()
        .scaleExtent([1, 10])
        .on("zoom", zoomed);

var svg = d3.select("#vis").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(zoom);

function zoomed() {
    svg.append("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

但是我的图表无法缩放。

关于如何解决这个问题的任何想法？

谢谢！

Answer 1

问题在于，除非存在视觉元素，否则svg不会捕获组中的鼠标事件。 您可以通过侦听组中的简单click事件（而不是call(zoom) ）来亲自查看。 click事件将永远不会被触发。

在d3示例中，Mike Bostock添加了一个矩形，即svg的宽度和高度来解决此问题，您可以执行类似的操作。

这是带有该占位符rect的可缩放Plunker： http ://plnkr.co/edit/N3WXCEkYpNgMflWmG8e4?p=preview

以下是相关代码：

var svg = d3.select("#vis").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .classed('transform-target', true)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(zoom);

svg.append("rect")
    .style('fill', 'transparent')
    .attr("width", width)
    .attr("height", height);

您应该能够使用双击或滚动来放大和缩小。