我有这个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 + ")");
}
但是我的图表无法缩放。
关于如何解决这个问题有什么想法吗?
谢谢!
最佳答案
问题是 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);
您应该能够使用双击或滚动来放大和缩小。
关于javascript - 如何为图表 D3 JS 添加缩放功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31228334/