d3.js中帶有弧形鏈接的後臺拖拽效果的縮放比例

我是d3.js的新手，所以請幫助我解決這個問題。縮放功能在節點上的鼠標懸停時工作，而不是在背景上，背景的拖動也不能在d3.js的弧形鏈接中生效。這裏是我創建的示例jsfiddle project。我看過example可以拖動背景。d3.js中帶有弧形鏈接的後臺拖拽效果的縮放比例

var zoom = d3.behavior.zoom().scaleExtent([1, 10]).on("zoom", zoomed); 
var links = graph.links; 
var nodes = graph.nodes; 
svg.call(zoom); 
svg.append("svg:defs").selectAll("marker") 
    .data(["publishedBy", "publishedOn", "depicts","postedOn","childOf"]) 
    .enter().append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 


links.sort(function(a,b) { 
    if (a.source > b.source) {return 1;} 
    else if (a.source < b.source) {return -1;} 
    else { 
     if (a.target > b.target) {return 1;} 
     if (a.target < b.target) {return -1;} 
     else {return 0;} 
    } 
}); 

for (var i=0; i<links.length; i++) { 
    if (i != 0 && 
     links[i].source == links[i-1].source && 
     links[i].target == links[i-1].target) { 
      links[i].linknum = links[i-1].linknum + 1; 
     } 
    else {links[i].linknum = 1;}; 
}; 


var link = svg.selectAll(".link") 
.data(links).enter().append("g") 
.attr("class", "link") 
.append("line") 
.attr("class", "link-line") 
.style("stroke-width", 1); 

var drag = d3.behavior.drag() 
.origin(function(d) { return d; }) 
.on("dragstart", dragstarted) 
.on("drag", dragged) 
.on("dragend", dragended); 


var node = svg.selectAll(".node") 
.data(graph.nodes).enter() 
.append("circle") 
.attr("class", "node") 
.attr("r", 20) 
.attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
.style("fill", function (d) { return color(d.type); }) 
.on("mouseover", mouseover) 
.on("mouseout", mouseout) 
.call(drag);

來源

2015-09-03 RCS

剛剛從一個粗略地看一眼，它看起來像你錯過的容器元素，這兩個例子中你給和邁克的拖動和縮放例子有：http://bl.ocks.org/mbostock/6123708 – wpercy

容器對象只包含svg元素，我寧願使用svg對象。我不認爲Container obj真的很重要。如果真的很重要，那麼我提到的其他例子也有容器對象沒有使用，但背景拖動工作正常。唯一的區別是我觀察到，鏈接在我的例子中是弧形的，在其他例子中是直線。 – RCS

更新了svg對象並添加了疊加樣式，現在我可以放大背景並拖動背景也正常工作。更新了 example提到的問題。

svg.append("rect").attr("class", "overlay").attr("width", width).attr("height", height); 

.overlay {fill: none; height="500"; width="1200"; pointer-events: all;}

來源

2015-09-04 10:09:14 RCS

d3.js中帶有弧形鏈接的後臺拖拽效果的縮放比例

回答

相關問題