d3.js yakınlaştırma yalnızca imleç piksellerin üzerinde hareket ettiğinde çalışır

Question

Bir dendrogramda yakınlaştırma özelliğini en basit, en basit şekilde uygulamaya çalışıyorum ve çalışmaya başladım. Tek sorun, yakınlaştırma olayının yalnızca imleç bir kenarın, bir düğümün veya bir metnin üzerine geldiğinde çalıştığıdır. İmleç svg'nin herhangi bir kısmında olduğunda zum yapmaya nasıl izin veririm? peşin http://jsfiddle.net/nrabinowitz/QMKm3/

Teşekkür: Ben bir kılavuz olarak aşağıdaki jsfiddle kullanıyorum ve fark nerede göremiyorum

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

.

Answer 1

İstediğiniz sorunun yanıtını bu vardır içinde işaret jsfiddle ...

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

Bu nerede olursanız çizilmiş her zaman bir şey emin olur. Kodunuzu buna göre ayarlamanız gerekiyor. Eğer beyazdan hoşlanmıyorsanız o zaman opaklık 0 yapabilirsin ve sonra onu göremezsin, ama orada olması gerek.