更改forceSimulation禁用拖

我已經修改Bostock's force direct graph example通過添加標籤和改變一些forceSimulation參數的產生我想要的佈局：更改forceSimulation禁用拖

<!DOCTYPE html> 
<meta http-equiv="content-type" content="text/html; charset=UTF8"> 
<style> 

.links line { 
    stroke: #999; 
    stroke-opacity: 0.6; 
} 

.nodes circle { 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

</style> 
<svg width="960" height="600"></svg> 
<script src="https://d3js.org/d3.v4.min.js" charset="urf-8"></script> 
<script> 

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"); 

var color = d3.scaleOrdinal(d3.schemeCategory20); 

var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { return d.id; })) 
    .force("charge", d3.forceManyBody()) 
    .force("center", d3.forceCenter(width/2, height/2)); 

    d3.json("http://localhost/mail/bostock/getneighborhood.php?contact=5244", function(error, graph) { 
    if (error) throw error; 

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

    var node = svg.append("g") 
    .attr("class", "nodes") 
    .selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("g") 
    .attr("class", "node") 
    .call(d3.drag() 
    .on("start", dragstarted) 
    .on("drag", dragged) 
    .on("end", dragended)); 

    node.append("circle") 
    .attr("r", 5) 
    .attr("fill", function(d) { return color(d.group); }); 


    node.append("text") 
     .attr("dx", 12) 
     .attr("dy", ".32em") 
     .attr("font-family", "sans-serif") 
     .attr("font-size", "8px") 
     .text(function(d) { return d.id; }); 

    var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(150).strength(1)) 
    .force("collide",d3.forceCollide(function(d){return d.r + 8 }).iterations(16)) 
    .force("charge", d3.forceManyBody().strength(-200)) 
    .force("center", d3.forceCenter(width/2, height/2)); 

    simulation 
     .nodes(graph.nodes) 
     .on("tick", ticked); 

    simulation.force("link") 
     .links(graph.links); 

    function ticked() { 
    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 dragstarted(d) { 
    if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
    d.fx = d.x; 
    d.fy = d.y; 
} 

function dragged(d) { 
    d.fx = d3.event.x; 
    d.fy = d3.event.y; 
} 

function dragended(d) { 
    if (!d3.event.active) simulation.alphaTarget(0); 
    d.fx = null; 
    d.fy = null; 
} 

</script>

唯一的問題是拖動功能不再起作用。任何人都可以建議如何解決？

來源

2017-04-07 Steve

對不起，錯過了您對前面問題的回覆。我回答了。 – Steve

如果你看看你的代碼，你會看到你有兩個變量名爲simulation。其中一人之外d3.json ...

var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { 
     return d.id; 
    })) 
    .force("charge", d3.forceManyBody()) 
    .force("center", d3.forceCenter(width/2, height/2));

...，另一個裏面d3.json：

var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { 
     return d.id; 
    }).distance(150).strength(1)) 
    .force("collide", d3.forceCollide(function(d) { 
     return d.r + 8 
    }).iterations(16)) 
    .force("charge", d3.forceManyBody().strength(-200)) 
    .force("center", d3.forceCenter(width/2, height/2));

是移動節點的模擬是內部的一個。但是，由於功能範圍的原因，拖動功能是指外部變量。

解決：只保留一個模擬，外d3.json。

來源

2017-04-08 00:32:00

這樣做。非常感謝你！ – Steve

更改forceSimulation禁用拖

回答

相關問題