I'm working on a simple d3 example where I use d3 to place some new divs on a page, add attributes, and add data-driven styles. The part that is tripping me up is when I want to use d3 to update some styles using new data. I've pasted the code from a jsFiddle ( <http://jsfiddle.net/MzPUg/15/> ) below. 

In the step that originally creates the divs, I use a key function to add indexes to the elements and in the update step (the part that isn't working) I also use a key function. But what isn't clear from the d3 documentation is how the actual data join works (e.g. where are indexes stored in the DOM elements? what if there are duplicate indexes?, etc.). 

So, there are obvious gaps in my knowledge, but keeping it simple here can anyone shed light on why this example is not working? Any additional info on the precise nature of data joins in d3 would be frosting on the cake. (I've already seen <http://bost.ocks.org/mike/join/>.)

```
//add a container div to the body and add a class
var thediv = d3.select("body").append("div").attr("class","bluediv");

//add six medium-sized divs to the container div
//note that a key index function is provided to the data method here
//where do the resulting index value get stored?
var mediumdivs = thediv.selectAll("div")
    .data([10,50,90,130,170,210],function(d){return d})
    .enter().append("div")
    .style("top",function(d){return d + "px"})
    .style("left",function(d){return d + "px"})
    .attr("class","meddiv")

//UPDATE STEP - NOT WORKING
//Attempt to update the position of two divs
var newdata = [{newval:30,oldval:10},{newval:80,oldval:50}]        
var mediumUpdate = mediumdivs.data(newdata,function(d){return d.oldval})
    .style("left",function(d){return d.newval + "px"})

```