我正在使用d3强制布局。我必须根据我拥有的数据显示节点之间的节点和链接。我正在使用数据设置圆的属性cx和cy。圆圈以正确的坐标显示,但节点数据中的d.x和d.y未更新。在tick函数中,源和目标具有相同的坐标。所以,我无法在两个节点之间画一条线。
var nodes = [{ id: 1, type: 'startNode', shape: 'circle', fixed: true},{ id: 2, type: 'endNode', shape: 'circle', fixed: true}],
links = [{ source: nodes[0], target: nodes[1]}];
//force layout init
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.linkDistance(150)
.charge(-500)
.on('tick', tick)
var pathElements = svg.append('svg:g').selectAll('path')
nodeElements = svg.append('svg:g').selectAll('g');
function restart(){
pathElements = pathElements.data(links);
pathElements.enter().append('svg:path')
.attr('class', 'link')
nodeElements = nodeElements.data(nodes, function(d){
return d.id;
});
var g = nodeElements.enter().append("svg:g")
g.append("svg:circle")
.attr('r','40')
.attr('class','node')
.attr('cx',function(d){
console.log(d.id)
return 100 * d.id;
})
.attr('cy',function(d){
return 100 * d.id;
})
force.start();
}
function tick() {
pathElements.attr('d', function(d) {
return 'M' + (d.source.x )+ ',' + (d.source.y) + 'L' + (d.target.x) + ',' + (d.target.y);
});
}