D3 강제 레이아웃 크기 조정

Question

d3.js에서 강제 레이아웃의 크기를 조정할 수 있습니까? 예를 들어, 레이아웃이

var force = d3.layout.force() 
.nodes(documents.nodes) 
.linkDistance(0) 
.friction(.2) 
.size([width, height]); 

force.start(); 

으로 정의되어 있으며 나중에 프로젝트에서 크기를 조정하려고합니다. 이것이 가능한가?

Answer 1

the documentation에 따르면, 강제 레이아웃의 매개 변수는 사용 가능한 공간이 아닌 노드의 무게 중심 및 초기 분포에만 영향을줍니다. 당신은 자신에 대한 제약을 강요해야합니다. tick 기능에 :

force.on("tick", function() { 
    node.attr("cx", function(d) { return Math.min(maxX, Math.max(minX, d.x)); }) 
     .attr("cy", function(d) { return Math.min(maxY, Math.max(minY, d.y)); }); 
} 

Answer 2

곧, resize 이벤트에 당신은 당신의 SVG 개체의 속성을 변경 (그것은 또한 무게 중심을 변경) 및 힘의 계산을 다시 시작해야합니다

window.onresize = function() { 
    width = window.innerWidth, height = window.innerHeight; 
    svg.attr('width', width).attr('height', height); 
    force.size([width, height]).resume(); 
}; 

을 d3 force의 예는 provided here입니다.