d3.js強制佈局不運行

我剛從d3.js開始，無法獲得簡單的演示以正常工作。調試很困難：如果有bug，它會在d3的縮小代碼中崩潰，而且沒有堆棧跟蹤。在這種情況下，它根本不會向錯誤控制檯輸出任何錯誤。d3.js強制佈局不運行

當我運行這段代碼時，我所有的節點都停留在位置（0,0），而不是被force（）佈局。怎麼了？

<html> 
<meta charset="UTF-8"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 
$(function() { 
    var svg = d3.select('#graph').append('svg').attr('width', 900).attr('height', 900) 

    var myNodes = [{name:'a'}, {name:'b'}, {name:'c'}] 
    var myLinks = [{source:myNodes[0], target:myNodes[1]}, {source:myNodes[1], target:myNodes[2]}, {source:myNodes[2], target:myNodes[0]}] 

    svg.append("text").text("myNodes[0].name=" + myNodes[0].name).attr('y', 50) 

    var force = d3.layout.force().charge(-120).linkDistance(30).size([900, 900]) 

    var link = svg.selectAll("line") 
        .data(myLinks) 
        .enter().append("svg:line"); 

    var node = svg.selectAll("circle") 
        .data(myNodes) 
        .enter().append("svg:circle") 
        .attr("r", 6) 
        .call(force.drag) 

    force.nodes(myNodes).links(myLinks).start() 
}); 
</script> 
</head> 

<body> 
<div id="graph"></div> 
</body> 
</html>

來源

2013-07-17 tba

隊剛剛處理setting x/y attributes on the nodes and links：

...最初的X和Y座標，如果尚未從外部設置爲一個有效的數字，通過檢查鄰近節點進行計算..

它實際上並不處理相應svg形狀的更新。這個你通常會做的tick event：

聽滴答事件來更新節點

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; }); 
});

其他唯一的一塊從你的榜樣缺失是設置線的樣式的顯示位置。默認情況下，它們沒有筆觸顏色，因此看起來不可見。您可以直接設置顏色就行了，就像這樣：

var link = svg.selectAll("line") 
       .data(myLinks) 
       .enter().append("svg:line") 
       .attr('stroke', 'red') 
       .attr('stroke-width', 2)

或者使他們的一個CSS類：

<style> 
.link { 
    stroke: blue; 
    stroke-width: 1.5px; 
} 
</style>

當你創建他們用它標記它們：

var link = svg.selectAll("line") 
       .data(myLinks) 
       .enter().append("svg:line") 
       .attr('class', 'link')

來源

2013-07-17 15:31:42 explunit

d3.js強制佈局不運行

回答

相關問題