d3 raise()/order problem

forked from zischwartz's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<button>Shuffle!1111!!</button>
<body>
  <script>
//     https://github.com/d3/d3-selection#joining-data
var svg = d3.select("body").append("svg")
  .attr("width", 960)
  .attr("height", 500)

let order = d3.local()

function update(data){  
  let things = svg.selectAll('rect').data(data, function(d,i, nodes){
    // this won't work if data contains duplicates
//     let index = data.indexOf(d)
    let el = nodes[i]
    console.log(el)
//     console.log(i, d, nodes)
    let index = order.get(this)
    if (index == undefined) {
      console.log('z')
      order.set( this, i)
      index = i
    }
//     console.log('l', ind)
//     console.log(i, d, nodes)
    return `${index}`
//     return `${index}`
  })
  things = things.enter().append('rect').merge(things)

things.transition()
    .duration(600)
    .attr('width', 100).attr('height', 100)
    .attr('x', (d,i)=>i*110)
    .attr('fill', (d)=> d)

things.on('click', function(d,i){ 
//     console.log(d,i, this)
    d3.select(this).raise().transition().attr('width', 300).attr('height', 300)
  })

things.on('dblclick', function(d,i){ 
		update(data)
  })
  
}

// works
// let original_data = ['red', 'green', 'blue', 'yellow']
// breaks
let original_data = ['green', 'red', 'blue', 'yellow']

update(original_data)
    
d3.select('button').on('click', ()=> {
  d3.event.preventDefault()
  update(d3.shuffle(original_data)) 
})
    
  </script>
</body>

https://d3js.org/d3.v4.min.js