如何更改d3.js中圆节点的属性？

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

var data = [
  { id: 1, radius: 10, color: "red" },
  { id: 2, radius: 20, color: "blue" },
  { id: 3, radius: 30, color: "green" }
];

var circles = svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .attr("cx", function(d) { return d.id * 50; })
                .attr("cy", 50)
                .attr("r", function(d) { return d.radius; })
                .style("fill", function(d) { return d.color; });

svg.select("circle:nth-child(1)")
   .attr("r", 50)
   .style("fill", "yellow");

data[1].radius = 40;
data[1].color = "orange";

svg.selectAll("circle")
   .data(data)
   .attr("r", function(d) { return d.radius; })
   .style("fill", function(d) { return d.color; });