javascript - 如何为图表 D3 JS 添加缩放功能

Question

我有这个DEMO我正在尝试使用以下代码添加缩放功能，如this example :

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 的宽度和高度的矩形来解决此问题，您可以执行类似的操作。

这是一个带有占位符矩形的可缩放 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);

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