Powiększanie d3.js działa tylko wtedy, gdy kursor nad pikselami wykresu

Question

Próbuję zaimplementować funkcję powiększania na dendrogramie w najprostszy, najprostszy sposób i udało mi się go uruchomić. Jedynym problemem jest to, że zdarzenie zoom działa tylko wtedy, gdy kursor znajduje się nad krawędzią, węzłem lub tekstem. Jak zezwolić na powiększanie, gdy kursor znajduje się na dowolnej części 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"); 

Używam następujący jsfiddle jako przewodnik i nie można zobaczyć, gdzie różnica jest: http://jsfiddle.net/nrabinowitz/QMKm3/

góry dzięki.

Answer 1

jsfiddle wskazaniu w Twoje pytanie ma ten ...

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

Daje to pewność, że zawsze coś wyciągnąć bez względu na to gdzie jesteś. Musisz odpowiednio dostosować swój kod. Możesz sprawić, że będzie nieprzezroczysty 0, jeśli nie spodoba ci się biały, a potem go nie zobaczysz, ale musi tam być.