如何添加缩放图表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添加了一个rect，即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);

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