d3.js zooming only works when cursor over pixels of graph

d3.js, javascript, svg

Solution

the jsfiddle you point to in your question has this...

vis.append('svg:rect')
    .attr('width', w)
    .attr('height', h)
    .attr('fill', 'white');

This makes sure there's always something drawn no matter where you are. You need to adjust your code accordingly. You can make it opacity 0 if you don't like white and then you won't see it, but it does need to be there.

Problem

I am trying to implement the zooming feature on a dendrogram in the simplest, most basic way and have gotten it to work. The only issue is that the zoom event only works when the cursor is over an edge, a node, or text. How do I allow zooming when the cursor is on any portion of the svg? ``` var margin = {top: 20, right: 120, bottom: 20, left: 120}, width = 2000 - margin.right - margin.left, height = 2000 - margin.top - margin.bottom; var x = d3.scale.linear() .domain([0, width]) .range([0, width]); var y = d3.scale.linear() .domain([0, height]) .range([height, 0]); var tree = d3.layout.tree() .size([height, width]) .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var svg = d3.select("body").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .attr("pointer-events", "all") .append('svg:g') .call(d3.behavior.zoom() .x(x) .y(y) .scaleExtent([1,8]) .on("zoom", zoom)) .append('svg:g'); function zoom(d) { svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } d3.json("flare.json", function(error, root) { var nodes = tree.nodes(root), links = tree.links(nodes); var link = svg.selectAll(".link") .data(links) .enter().append("path") .attr("class", "link") .attr("d", diagonal); var node = svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") // .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) node.append("circle") .attr("r", 4.5); node.append("text") .attr("dy", ".31em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) // .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) .text(function(d) { return d.name; }); }); d3.select(self.frameElement).style("height", "800px"); ``` I have been using the following jsfiddle as a guide and cannot see where the difference is: http://jsfiddle.net/nrabinowitz/QMKm3/ Thanks in advance.

Original source