d3 노드의 강제 레이아웃 링크 위치

d3 force 레이아웃에 대한 몇 가지 질문을 읽었지만 아직 내 대답을 찾지 못해서 게시하고 있습니다.d3 노드의 강제 레이아웃 링크 위치

저는 D3 라이브러리, 특히 강제 레이아웃으로 작업하고 있습니다. 노드에 미리 정의 된 모양을 추가하는 대신 원형, 직사각형 등의 모양을 만듭니다.

var shapes = { 
     star : "m 0 0 l 23 12 l -4 -26 l 19 -19 l -27 -4 l -11 -23 l -12 23 l -27 4 l 19 19 l -4 26 l 24 -12", 
     rect : "M 0 0 L 0 "+ rect_size + "L "+ 2 * rect_size + " "+ rect_size + " L "+ 2 * rect_size + " 0 L 0 0", 
     vertical_rect : "M 0 0 L 0 "+ 2 * rect_size + "L "+ rect_size + " "+ 2 * rect_size + " L "+ rect_size + " 0 L 0 0", 
     circle: "M 0 0 A "+ radius + " " + radius +" 0 1 0 0.00001 0 Z" 
     }; 
var dummy_nodes = {}; 
var dummy_shapes = {"A" : shapes.circle, "B" : shapes.rect, "C" : shapes.rect, "D" : shapes.circle}; 

    // Compute the distinct nodes from the links. 
links.forEach(function (link) { 
     link.source = dummy_nodes[link.source] || (dummy_nodes[link.source] = 
                { name: link.source, shape: dummy_shapes[link.source]}); 
     link.target = dummy_nodes[link.target] || (dummy_nodes[link.target] = 
                { name: link.target,shape: dummy_shapes[link.target]}); 
    }); 
var force = d3.layout.force() 
     .nodes(d3.values(dummy_nodes)) 
     .links(links) 
     .size([960, 500]) 
     .linkDistance(200) 
     .charge(-1500) 
     .on("tick", tick) 
     .start(); 
var svg = d3.select("body").append("svg:svg") 
     .attr("width", w) 
     .attr("height", h); 
var node = svg.append("svg:g").selectAll(".node") 
     .data(force.nodes()) 
     .enter().append("path") 
     .attr("class", "node") 
     .attr("d", function(n){ return n.shape}) 
     .on("dblclick", dblclick) 
     .call(drag);

당신은 내가 그래프의 링크 (또는 가장자리가) 각 노드를 입력 느릅 나무의 위치를 변경하는 방법을 이해하지 못하고 전체 코드 here

을 볼 수 있습니다.

예를 들면 : 왼쪽 모서리 대신 직사각형의 중심에 위치하는 사각형 노드에서 가장자리가 나오는 것이 좋습니다 (위치 0,0). 이제는 SVG의 각 모양에 대한 CX 및 CY와 관련된 것이 있어야하지만 내 이해가 아닙니다.

나는 나의 질문은 깨끗한 지, 내가

감사를 왼쪽 수도했습니다 무엇이든 물어 주시기 바랍니다!

출처

2014-06-11 Fran Gimenez

데이터 항목의 'x'및 'y'속성을 설정하여 초기 위치를 설정할 수 있습니다. –

그냥 내가 H, V 및 z 그렇게에게로 L에서 교환 한

rect : "M " + -rect_size + " " + (-rect_size/2) + " h " + 2 * rect_size + " v " + rect_size + " h "+ (-2 * rect_size) + " z",

로 정의

rect : "M 0 0 L 0 "+ rect_size + "L "+ 2 * rect_size + " "+ rect_size + " L "+ 2 * rect_size + " 0 L 0 0",

로 구형 영역을 정의하는 당신의 형상 원점 즉의 중심을 대신 할 그것은 더 간단합니다. 당신은 다른 모양들과 같은 것을 할 수 있습니다.

출처

2014-06-11 12:58:02

감사합니다. 그 트릭을 했어. –

d3 노드의 강제 레이아웃 링크 위치

답변

관련 문제