I am trying to work out how to update some D3.js elements just by binding new data. I'm not actually sure if this is possible or not, but it feels like it should be.

So first I have created four SVG circles, and set the cx offset as a function of the data:

 <body><div id="container"></div></body>

 var svg = d3.select("div.container").append("svg")
     .attr("class", "chart")
     .attr("width", 1000)
     .attr("height", 500);

  // Create initial data and display
  var data = [0, 10, 20, 30];
  var circle = svg.selectAll("circle")
      .data(data)
      .enter()
      .append('circle')
      .attr("cx", function(d) {
        return d*10;
      })
      .attr("cy", 100)
      .attr("r", 10)
      .style("fill", "steelblue");

Next I attach new data and a transition. I would expect to see the circles move slowly across to the new position (that's what I'm trying to achieve), but they don't: 

  var data1 = [40, 50, 60, 70];
  circle.data(data1).transition().duration(2500);

Am I making a basic error? Perhaps I have the wrong selection. Or is it simply not possible to update elements solely by manipulating data?

UPDATE: if I do console.log(circle) then I see an array of SVG circle elements, which is what I would expect.

javascript d3.js
Edit
Report