如何绘制具有不同大小节点的图

<div id="chart"></div>

var nodes = [
  { id: "node1", size: 10 },
  { id: "node2", size: 20 },
  { id: "node3", size: 30 },
  // ...
];

var links = [
  { source: "node1", target: "node2" },
  { source: "node2", target: "node3" },
  // ...
];

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", function(d) { return d.size; })
  .style("fill", "blue");

var link = svg.selectAll(".link")
  .data(links)
  .enter()
  .append("line")
  .attr("class", "link")
  .style("stroke", "gray");

node.on("mouseover", function(d) {
  d3.select(this).style("fill", "red");
});

node.on("mouseout", function(d) {
  d3.select(this).style("fill", "blue");
});

node.style("fill", function(d) {
  if (d.size > 20) {
    return "green";
  } else {
    return "blue";
  }
});

link.style("stroke-width", function(d) {
  return d.size / 10;
});