d3.js 그래프

Question

의 픽셀 이상의 커서 내가 가장 간단하고 기본적인 방법으로 dendrogram은에 줌 기능을 구현하려고하고 작업을 찍었을 때 작동합니다. 유일한 문제는 커서가 가장자리, 노드 또는 텍스트 위에있을 때만 확대/축소 이벤트가 작동한다는 것입니다. 커서가 svg의 어느 부분에있을 때 확대/축소를 허용하려면 어떻게합니까? 사전에 http://jsfiddle.net/nrabinowitz/QMKm3/

감사 : 나는 가이드로 다음 jsfiddle을 사용하고 그 차이는 어디에서 볼 수

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

당신이 당신의 질문이있다에서 가리키는 jsfiddle ...

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

이것은 당신이 상관없이 그려 뭔가 항상 확신합니다. 그에 따라 코드를 조정해야합니다. 흰색이 맘에 들지 않는다면 불투명도 0으로 만들 수 있습니다. 그러면 흰색이 보이지 않지만 거기에 있어야합니다.