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)）来自行查看。 <{1}}事件永远不会被解雇。

在d3示例中，Mike Bostock添加了一个矩形，它是svg的宽度和高度来解决这个问题，你可以做类似的事情。

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

以下是相关代码：

click

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

如何将缩放添加到图表D3 JS

1 个答案: