Le zoom de d3.js ne fonctionne que lorsque le curseur se trouve sur les pixels du graphique

Question

J'essaie d'implémenter la fonction de zoom sur un dendrogramme de la manière la plus simple et la plus basique possible et j'ai réussi à la faire fonctionner. Le seul problème est que l'événement de zoom ne fonctionne que lorsque le curseur est sur un bord, un nœud ou du texte. Comment puis-je autoriser le zoom lorsque le curseur se trouve sur n'importe quelle partie du 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");

J'ai utilisé le jsfiddle suivant comme guide et je ne vois pas où est la différence : http://jsfiddle.net/nrabinowitz/QMKm3/

Merci d'avance.

Answer 1

Le jsfiddle que vous indiquez dans votre question a ceci...

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

Cela permet de s'assurer qu'il y a toujours quelque chose de dessiné, où que vous soyez. Vous devez adapter votre code en conséquence. Vous pouvez lui donner une opacité de 0 si vous n'aimez pas le blanc et vous ne le verrez pas, mais il doit être là.