d3v4拖动一个节点,其相关连线节点跟着动
时间: 2024-01-20 08:03:02 浏览: 28
在D3 v4中,拖动节点并更新与其相关连线的位置可以使用类似于D3 v5的方法实现。以下是一个简单的实现示例:
```javascript
// 定义节点和连线数据
var nodes = [{id: 'node1', x: 50, y: 50}, {id: 'node2', x: 150, y: 100}];
var links = [{source: 'node1', target: 'node2'}];
// 创建节点和连线
var nodeSelection = d3.select('svg')
.selectAll('.node')
.data(nodes)
.enter()
.append('circle')
.classed('node', true)
.attr('r', 20)
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.call(d3.drag()
.on('drag', function(d) {
// 更新节点位置
d.x = d3.event.x;
d.y = d3.event.y;
d3.select(this)
.attr('cx', d.x)
.attr('cy', d.y);
// 更新与该节点相关的连线位置
linkSelection
.filter(function(l) { return l.source === d.id || l.target === d.id; })
.attr('x1', function(l) { return getNode(l.source).x; })
.attr('y1', function(l) { return getNode(l.source).y; })
.attr('x2', function(l) { return getNode(l.target).x; })
.attr('y2', function(l) { return getNode(l.target).y; });
}));
var linkSelection = d3.select('svg')
.selectAll('.link')
.data(links)
.enter()
.append('line')
.classed('link', true)
.attr('x1', function(d) { return getNode(d.source).x; })
.attr('y1', function(d) { return getNode(d.source).y; })
.attr('x2', function(d) { return getNode(d.target).x; })
.attr('y2', function(d) { return getNode(d.target).y; });
function getNode(id) {
return nodes.find(function(n) { return n.id === id; });
}
```
该示例与D3 v5的示例类似,区别在于拖拽事件的创建方式不同。在D3 v4中,需要手动创建拖拽事件,而不是使用`d3.drag()`方法。具体实现可以参考上述示例代码。
需要注意的是,D3 v4和D3 v5在其他方面也存在一些差异,如选择器语法、缓动函数等。在使用D3 v4时需要注意这些差异。