d3.js 맨 아래로 강제 레이아웃 - 드래그 동작

Question

맨 아래로 강제로 트리 레이아웃을했습니다. 어쨌든 드래그 동작은 분명히 상자 밖의 기대대로 작동하지 않습니다. 원하는 드래그 동작을 수행 할 수있는 완벽한 방법을 찾을 수 없습니다. 관찰 할 수 있듯이, 현재 트리 반대 방향입니다.

블록 - http://bl.ocks.org/git-ashish/6d5f8014661488ae786b

바이올린 - http://jsfiddle.net/ashishsingh/jyrwsa0y/

function tick(e) { 

// Push sources up and targets down to form a weak tree. 
var k = 6 * e.alpha; 
json.links.forEach(function(d, i) { 
    d.source.y -= k; 
    d.target.y += k; 
}); 

node.attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return h - d.y; }); 

link.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return h - d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return h - d.target.y; }); 
} 

어떤 도움이나 방향을 감상 할 수있다.

감사합니다.

Answer 1

"약한 나무"라는 말에 무슨 뜻인지 모르겠지만 소스를 내려 놓고 목표를 정하는 것이지 반대로는 아닌 것 같습니다.

이 함께 tick 기능을 변경 :

function tick(e) { 

var k = 6 * e.alpha; 
json.links.forEach(function(d, i) { 
    d.source.y += k; 
    d.target.y -= k; 
}); 

node.attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 

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

당신은 하향식 (top-down) 당신이 원하는 것 같다 this example의 반전 상당이다 this behaviour (fiddle)를 얻을.