This isn't how d3js is meant to work. This is meant to illustrate the concepts in an interactive way.
Created
June 16, 2015 23:39
-
-
Save TheMcMurder/4176a5eaed4df876c6db to your computer and use it in GitHub Desktop.
Crazy d3 enter exit update example
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
| var data =[45, 10]; | |
| init(); | |
| //creating the svg so I can draw objects on it | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 500) | |
| .attr("height", 5000); | |
| //createCirclesNotBound(); | |
| var circleArray; | |
| bindData(data); | |
| var duration = 800; | |
| function enter() { | |
| //********************************************************************************** | |
| // Enter: all pieces of data that do not have a node to bind to. | |
| // If there are already circles ('nodes') there would have to be more | |
| // data points than nodes in our dataset to have enter run at all; | |
| //********************************************************************************** | |
| refreshArray(); | |
| circleArray.enter() | |
| .append("circle") | |
| .attr("cx", 100) | |
| .attr("cy", function(d, i){ | |
| return (i + 1)*100; | |
| }) | |
| .attr("fill", "#78AB46") | |
| .attr('r', 0) | |
| .transition() | |
| .duration(duration) | |
| .attr("r", 30); | |
| refreshArray(); | |
| } | |
| function update() { | |
| //********************************************************************************** | |
| // Update: Every node that is bound to data, in this case that is everything we've | |
| // entered and everything that has just been bound from the .data(data) bind. | |
| //********************************************************************************** | |
| refreshArray(); | |
| circleArray | |
| .transition() | |
| .duration(duration) | |
| .style('fill', 'steelblue') | |
| .attr('r', function (d){ | |
| return d; | |
| }); | |
| refreshArray(); | |
| } | |
| function exit() { | |
| //********************************************************************************** | |
| // Exit: Every node ('circles') that exists in your selection that you don't have | |
| // bound data to | |
| //********************************************************************************** | |
| refreshArray(); | |
| circleArray.exit() | |
| .transition().duration(duration) | |
| .style("fill", "red") | |
| .transition().duration(duration).delay(duration) | |
| .attr("r", 0) | |
| .transition() | |
| .remove(); | |
| refreshArray(); | |
| } | |
| function changeData() { | |
| var random = ((Math.random() * 8) + 1); | |
| data = []; | |
| for (var i = 0; i < random; i++) { | |
| data.push(Math.floor((Math.random() * 45) + 10)); | |
| } | |
| displayData(data); | |
| bindData(data); | |
| } | |
| function bindData(data){ | |
| circleArray = svg.selectAll("circle") | |
| .data(data); | |
| } | |
| function removeAll() { | |
| svg.selectAll("circle").remove(); | |
| refreshArray(); | |
| } | |
| function refreshArray() { | |
| bindData(data); | |
| } | |
| function init() { | |
| displayData(data); | |
| } | |
| function displayData(data){ | |
| document.querySelectorAll('span')[0].innerHTML = data; | |
| } | |
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> | |
| <html> | |
| <head> | |
| <title>Enter Update Exit </title> | |
| </head> | |
| <body> | |
| <div> | |
| <br/> | |
| <br/> | |
| <span></span> | |
| <br/> | |
| <br/> | |
| <button onclick="changeData()">Change and Show Data</button> | |
| <button onclick="enter()">Enter</button> | |
| <button onclick="update()">Update</button> | |
| <button onclick="exit()">Exit</button> | |
| <button onclick="removeAll()">Remove All</button> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment