如何为图表D3 JS添加缩放

Question

I have this DEMO and I'm trying to add zooming functionality with the following code as in 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 + ")");
}

But my chart doesn't zoom.

Any ideas on how to solve this?

Thanks!

Answer 1

The problem is that svg doesn't capture mouse events on a group unless there is a visual element present. You can see this for yourself by listening for a simple click event on the group (instead of call(zoom) ). The click event will never be fired.

In the d3 example, Mike Bostock adds a rect that is the width and height of the svg to work around this, and you can do something similar.

Here is a zoomable Plunker with that placeholder rect: http://plnkr.co/edit/N3WXCEkYpNgMflWmG8e4?p=preview

Here is the relevant code:

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);

You should be able to zoom in and out using doubleclick or scroll.