d3.js 강제 레이아웃이 실행되지 않습니다

저는 d3.js로 시작 했으므로 간단한 데모를 제대로 수행 할 수 없습니다. 디버깅하기가 어렵습니다 : 버그가있는 경우 d3의 축소 코드에서 스택 추적없이 충돌하는 경우가 있습니다. 이 경우 오류 콘솔에 오류를 전혀 인쇄하지 않습니다.d3.js 강제 레이아웃이 실행되지 않습니다

이 코드를 실행하면 모든 노드가 force()에 의해 배치되는 대신 (0,0)의 위치에 고정됩니다. 뭐가 문제 야?

<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 강제 레이아웃이 실행되지 않습니다

답변

관련 문제