d3의 화살표를 사용하여 도형을 연결하십시오.

Question

화살표를 사용하여 세 가지 기본 세관 모양을 연결하려고하는데이 arrow을 참조로 사용했습니다.

어떤 모양을 움직여도 lucidchart의 동작을 복제하고 싶습니다. 강제 레이아웃을 사용하여 많은 예제를 보았습니다.하지만 그 중 제가 시도하려고하는 것에 대해 좋은 후보인지 확실하지 않습니다. 달성, 그래서 어떤 지침을 주시면 감사하겠습니다.

var data =[{"x":"100.0","y":"100.0","name":"shape-0","id":"543fe9949382ed4a16c38cf3","type":"startEvent","index":0},{"x":"610","y":"100.0","name":"shape-1","id":"543fe9949382ed4a16c38cf5","type":"endEvent","index":1},{"x":"318","y":"93","name":"first task","id":"543fe9a09382ed4a16c38cf6","type":"task","index":2}]; 

var links = [ 
    {"source":{"x":136,"y":118}, 
    "target":{"x":318,"y":118}}, 
    {"source":{"x":428,"y":118}, 
    "target":{"x":610,"y":118}}]; 

var node = svg.selectAll('g').data(data) 
    .enter() 
    .append(function(d){ 
     return shapes[d.type](d).node(); 
    }); 

var link = svg.selectAll('.link') 
.data(links).enter().append('g').attr('class', 'node') 
.append('line') 
.attr('class','path') 
.style('stroke-width', 2) 
.attr('marker-end', 'url(#arrow)'); 

link.selectAll("line").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; 
    }) 

//arrows 
svg.append('svg:defs').append('svg:marker') 
.attr('id', 'arrow').attr('viewBox', '0 0 10 10') 
.attr('refX', 0).attr('refY', 5) 
.attr('markerUnits', 'strokeWidth') 
.attr('markerWidth', 8) 
.attr('markerHeight', 6) 
.attr('orient', 'auto') 
.append('svg:path') 
.attr('d', 'M 0 0 L 10 5 L 0 10 z'); 


svg.append('line') 
.attr('x1', 5) 
.attr('x2', 50) 
.attr('y1', 5) 
.attr('y2', 50) 
.style('stroke', 'black') 
.attr('stroke-width', 2) 
.attr('marker-end', 'url(#arrow)'); 

이 참조 할 수 fiddle입니다 :

이

내 코드입니다. 미리 감사드립니다.

Answer 1

나는이 질문을 이해하고 있기 때문에 레이아웃이 필요 없다고 생각합니다. 명쾌한 차트 끌기 기능을 사용하려는 경우는 아닙니다.

너는 data 배열을 가지고 있는데, 이는 x와 y 위치를 포함하여 장면의 모든 모양 (모델)을 표현한 것입니다. 목표는 도형을 드래그 할 때 해당 x 및 y 소품을 업데이트 한 다음 모든 모양을 다시 렌더링하는 것입니다 (일반적인 enter, update, exit 루틴을 통해).

트리 또는 파티션 레이아웃의 경우와 같이 각 셰이프에 대해 명시적인 x 및 y가 없거나 각 셰이프의 x 및 y가 다른 x와 y (강제 배치의 경우처럼).

드래그를 구현하려면 this example과 같이 d3.behavior.drag()을 사용할 수 있습니다. 그러나이 예와 달리 d의 x 및 y 속성 값을 수정하려는 경우 data의 모양 정의인데 DOM 요소의 위치는 예제와 다릅니다.