Geek Answers Handbook

D3.js scaling only works with cursor over graph pixels

I try to implement the scaling function on the dendrogram in the simplest, most simple way and it worked. The only problem is that the zoom event only works when the cursor is over an edge, node or text. How to enable scaling when the cursor is on any part of 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 [dy, dx]; }); 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(" + (dx - 90) + ")translate(" + dy + ")"; }) .attr("transform", function(d) { return "translate(" + dy + "," + dx + ")"; }) 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 dx < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) .text(function(d) { return d.name; }); }); d3.select(self.frameElement).style("height", "800px");

I am using the following jsfiddle as a guide and can't see where the difference is: http://jsfiddle.net/nrabinowitz/QMKm3/

Thanks in advance.

+6
source share
1 answer

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

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

This ensures that something is always done no matter where you are. You need to adjust the code accordingly. You can make it opaque to 0 if you don't like white and then you won't see it, but it should be there.

+2
source

More articles:


All Articles