D3 힘 지향 그래프 : 노드 위치 업데이트

방금 d3 library으로 시작했습니다. 며칠 동안 API를 살펴보고 예제를 검토하고 force-directed graph 예제를 기반으로 내 프로젝트를 시작했습니다.D3 힘 지향 그래프 : 노드 위치 업데이트

간단한 모양 (square, circle ...) 대신 경로를 사용하여 노드를 그리는 경우에 대비하여 tick 이후에 노드의 위치를 업데이트 할 수 있습니까?

내가 여기에 볼 수있는 예를 제공 한 : 일반적인 모양에 대한 jsFiddle

var svg = d3.select('#view').attr({width: 300, height: 300}); 

var data = { 
    "nodes": [ 
     { 
      "id": "node_0", 
      "name": "Node 0", 
      "color": "blue", 
      "h": 10, 
      "w": 20, 
      "t": "triangle" 
     },.... 

    ], 

    "links": [ 
     { 
      "source": 0, 
      "target": 1 
     },... 

    ] 
}; 

var force = d3.layout.force().size([300, 300]) 
.linkDistance(50) 
.nodes(data.nodes) 
.links(data.links).start() 

var link = svg.selectAll('.link').data(data.links).enter() 
.append('line') 
.attr('class', 'link') 
.attr({"stroke": "#ccc", "stroke-width": 1.5}); 

var wrapper = svg.selectAll('.node').data(data.nodes).enter() 
.append('g') 
.attr('class', 'node') 
.attr('x', function(d){return d.x}) 
.attr('y', function(d){return d.y}); 

var getShape = function(t, x, y, w, h){ 
    var points = (t == 'triangle') ? 
     [ [x + w/2, y], [x + w/2 , y], [x + w, y + h], [x, y + h]] 
     : 
     [ [x, y], [x + w, y], [x + w, y + h], [x, y + h]]; 

    return d3.svg.line()(points) 
} 

var node = wrapper.append('path') 
.attr('d', function(d){return getShape(d.t, d.x , d.y, d.h, d.w) }) 
.attr('x', function(d){return d.x}) 
.attr('y', function(d){return d.y}) 
.attr('fill', function(d){return d.color}) 
.call(force.drag); 

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

출처

2013-08-29 ikamatovic