d3拖动一个节点，其相关连线节点跟着动

实现这个功能的关键就是在节点拖动时，同时改变与该节点相关的连线的位置。以下是一种实现方式：

1. 给节点添加拖拽事件，当节点被拖拽时获取其位置信息，并更新节点的位置。

2. 遍历所有与该节点相关的连线，获取其起点和终点的位置信息，并计算出新的起点和终点位置。

3. 更新连线的起点和终点位置，使其跟随节点移动。

下面是一个简单的实现示例（使用d3.v5）：

// 定义节点和连线数据
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; });
}

在这个示例中，节点和连线数据分别存储在`nodes`和`links`数组中。创建节点和连线时，使用`d3.drag`为节点添加拖拽事件。在拖拽事件中，更新节点位置，并使用`filter`方法筛选出与该节点相关的连线，更新其位置。

在实际应用中，可能还需要考虑节点和连线的颜色、样式、交互等方面的实现。