我見過這個問題：Is there a way to zoom into a D3 force layout graph?
但是我從我的圖形中得到了一些意想不到的行為 – 在幾次拖動或縮放或平移后所有節(jié)點(diǎn)都凍結(jié)并拖動停止工作.
我創(chuàng)造了這個小提琴：http://jsfiddle.net/7gpweae9/9/
所以要求代碼,所以這里是主要部分：
var svg = d3.select("#graph") .append("svg:svg") .attr("width", width) .attr("height", height) .attr("pointer-event", "all") .append("svg:g") .call(d3.behavior.zoom().on("zoom", zoom)) .append("svg:g");svg.append("svg:rect") .attr("width", width) .attr("height", height) .attr('fill', 'white');var link = svg.selectAll(".link");var node = svg.selectAll(".node");var force = d3.layout.force() .nodes(nodes) .links(links) .size([width,height]) .linkDistance(100) .charge(-400) .start();var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended);node = svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .call(drag);node.append("circle") .attr("class", "node-circle") .attr("r", 12);node.append("text") .attr("x", 12) .attr("y", ".35em") .text(function(d) { return d.word; });link = svg.selectAll(".link") .data(links) .enter().append("line") .attr("class", "link");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("transform", function(d) { return "translate(" d.x "," d.y ")"; });});function zoom() { svg.attr("transform", "translate(" d3.event.translate ")scale(" d3.event.scale ")");}function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true);}function dragged(d) { d3.select(this).attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);}function dragended(d) { d3.select(this).classed("dragging", false);}也許我錯過了一些東西,我之前從未使用過d3.
UPD：似乎在一段時間后發(fā)生凍結(jié).
解決方法:
我將d3.layout.force()替換為force.drag(),現(xiàn)在它幾乎可以正常工作.
var nodes; var links; prepareData(); var graph = document.querySelectorAll("#graph")[0]; var height = 500; var width = 500; var svg = d3.select("#graph").append("svg:svg") .attr("width", width) .attr("height", height) .attr("pointer-event", "all") .append("svg:g") .call(d3.behavior.zoom().on("zoom", zoom)) .append("svg:g"); svg.append("svg:rect") .attr("width", width) .attr("height", height) .attr('fill', 'white'); var link = svg.selectAll(".link"); var node = svg.selectAll(".node"); var force = d3.layout.force() .nodes(nodes) .links(links) .size([width,height]) .linkDistance(100) .charge(-400) .start(); var drag = force.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) node = svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .call(drag); node.append("circle") .attr("class", "node-circle") .attr("r", 12); node.append("text") .attr("x", 12) .attr("y", ".35em") .text(function(d) { return d.word; }); link = svg.selectAll(".link") .data(links) .enter().append("line") .attr("class", "link"); 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("transform", function(d) { return "translate(" d.x "," d.y ")"; }); }); function zoom() { svg.attr("transform", "translate(" d3.event.translate ")scale(" d3.event.scale ")"); } function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); } function dragged(d) { d3.select(this).attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y); } function prepareData() { nodes = [{"index":0,"word":"edit"},{"index":1,"word":"course","sentences":[29859]},{"index":2,"word":"needs","sentences":[29859]},{"index":3,"word":"fit","sentences":[29859]},{"index":4,"word":"slides","sentences":[29859]},{"index":5,"word":"print","sentences":[29859]},{"index":6,"word":"can","sentences":[29859]}]; links = [{"source":0,"target":1},{"source":0,"target":2},{"source":0,"target":3},{"source":0,"target":4},{"source":0,"target":5},{"source":0,"target":6}] }svg { border: 1px solid black;}.link { stroke: #000; stroke-width: 1px;}.node-circle { cursor: move; fill: #ccc; stroke: #000; stroke-width: 2px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><body> <div id="graph"></div></body>