d3.js想要在拖动时更改节点样式

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建力导向图布局
var force = d3.layout.force()
  .size([500, 500]);

// 创建节点和链接的数据集
var nodes = [
  { id: 1, name: "Node 1", color: "red" },
  { id: 2, name: "Node 2", color: "blue" },
  { id: 3, name: "Node 3", color: "green" }
];

var links = [
  { source: 1, target: 2 },
  { source: 2, target: 3 }
];

// 绑定数据集到力导向图布局
force.nodes(nodes)
  .links(links);

// 创建节点和链接的SVG元素
var link = svg.selectAll(".link")
  .data(links)
  .enter()
  .append("line")
  .attr("class", "link");

var node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", 20)
  .style("fill", function(d) { return d.color; })
  .call(force.drag); // 启用拖拽行为

// 定义拖拽事件
var drag = force.drag()
  .on("dragstart", dragstart);

function dragstart(d) {
  d3.select(this).style("fill", "yellow"); // 拖拽开始时更改节点样式
}

// 监听力导向图布局的tick事件，更新节点和链接的位置
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; });
});

// 启动力导向图布局
force.start();