Built with blockbuilder.org
forked from zischwartz's block: fresh block
Last active
January 30, 2018 16:18
-
-
Save zischwartz/ea5e1f21acbddbbe1e2201bcb1d55179 to your computer and use it in GitHub Desktop.
d3 raise()/order problem
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment