如何防止在我的節點上使用mousedrag時使用d3.behavior.zoom（）。on（「zoom」，redraw）？

就像現在一樣，當我在後臺運行mousedrag時，它會移動整個圖形。當我點擊並拖動節點時，它也會移動整個圖形。當我刪除如何防止在我的節點上使用mousedrag時使用d3.behavior.zoom（）。on（「zoom」，redraw）？

d3.select(".graph") 
    .call(d3.behavior.zoom().on('zoom', redraw));

我可以點擊並拖動節點就好了，但我不能在地圖上滾動或放大。我想要的是當我拖動背景時能夠平移地圖，並在單擊並拖動節點時移動節點。

現在，當我試圖申請.call(d3.behavior.zoom().on('zoom', redraw));到一個矩形的運動是真喜客，所以我一直在它.graph，但是當我有它的圖形，當我選擇的節點，他們移動了整個事情。我嘗試了一些東西，包括.call(d3.behavior.zoom().on('zoom', null));對svg.selectAll("g")我也試過做一些條件表達式設置enableevent爲false與.on("mousedrag", function)無濟於事。我似乎無法找到一種方法來完成這項工作。你可以從here得到miserables.json。任何幫助，將不勝感激。謝謝。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 

.node { 
    stroke: #00000; 
    stroke-width: 0px; 
} 

.link { 
    stroke: #999; 
    stroke-opacity: .6; 
} 

</style> 
</head> 
<body> 
<div class="graph"></div> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var width = 1100, 
    height = 900; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .gravity(.05) 
    .charge(-700) 
    .linkDistance(150) 
    .size([width, height]); 

var svg = d3.select(".graph").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append('g'); 

d3.select(".graph") 
    .call(d3.behavior.zoom().on('zoom', redraw)); 

function redraw() { 
    console.log("here", d3.event.translate, d3.event.scale); 
    svg.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } 

d3.json("miserables.json", function(error, graph) { 
    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    var link = svg.selectAll(".link") 
     .data(graph.links) 
    .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

    var node = svg.selectAll("g") 
     .data(graph.nodes) 
     .enter().append("g") 
     .attr("class","node") 
     .call(force.drag); 

    node.append("circle") 
    .attr("r", function(d) { return Math.sqrt(d.group * 20); }) 
    .style("fill", function(d) { return color(d.group); }) 
    .attr("pointer-events", "auto") 
    .attr("class", "circlenode"); 

    node.append("text") 
    .attr("text-anchor", "right") 
    .attr("fill","black") 
    .style("pointer-events", "none") 
    .attr("font-size", function(d) { 20 + 'px'; }) 
    .attr("font-weight", function(d) { return "bold"; }) 
    .text(function(d) { return d.name + ' (' + d.group + ')';}); 

    setTimeout(function() { 
    node.classed("fixed", function(d) { return d.fixed = true; }); 
    }, 9000); 

    force.on("tick", function() { 
    link.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";}); 
    }); 
}); 
</script> 

</body> 
</html>

來源

2015-04-07 raz

想通了。當我嘗試移動背景時，它不會發生在我身上，我可以使用鼠標懸停事件來指示我在背景上的時間。

首先創建一個背景。

svg.append("rect") 
    .attr("class", "background") 
    .attr("width", "100%") 
    .attr("height", "100%") 
    .attr("fill", "pink");

然後爲背景創建鼠標懸停事件以及您希望它工作而不工作的地方。

d3.select(".background") 
.on("mouseover", function() { 
    d3.select(".graphmap") 
    .call(d3.behavior.zoom().on("zoom", redraw)) 
    .on("dblclick.zoom", null) 
    .on("wheel.zoom", null); 
}) 
.on("mouseout", function() { 
    d3.select(".graphmap") 
    .call(d3.behavior.zoom().on("zoom", null)) 
    .on("dblclick.zoom", null) 
    .on("wheel.zoom", null); 
}); 
d3.select(".link") 
.on("mouseover", function() { 
    d3.select(".graphmap") 
    .call(d3.behavior.zoom().on("zoom", redraw)) 
    .on("dblclick.zoom", null) 
    .on("wheel.zoom", null); 
}) 
    .on("mouseout", function() { 
    d3.select(".graphmap") 
    .call(d3.behavior.zoom().on("zoom", null)) 
    .on("dblclick.zoom", null) 
    .on("wheel.zoom", null); 
});

現在我只需要弄清楚如何在轉換時不跳過它。：S

來源

2015-04-07 16:57:20 raz

FWIW，我偶然發現了一個特別功能完整的示例，它可以滿足您（和我）的需求，以及更多：http：//bl.ocks.org/eyaler/10586116。正如其標題所示，它可以拖放/縮放/平移/居中/調整大小/標籤/過濾/高光。 –

如何防止在我的節點上使用mousedrag時使用d3.behavior.zoom（）。on（「zoom」，redraw）？

回答

相關問題