Skip to content

Instantly share code, notes, and snippets.

@tenten0213

tenten0213/data-binding.html

Created September 30, 2013 08:23
Show Gist options
  • Save tenten0213/6760822 to your computer and use it in GitHub Desktop.
Save tenten0213/6760822 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data-binding.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Data Binding</title>
</head>
<body>
<div id="fruits">
<p>リンゴ</p>
<p>オレンジ</p>
<p>バナナ</p>
</div>
<button onclick="updateFruits()">
update
</button>
<button onclick="enterFruits()">
enter
</button>
<button onclick="exitFruits()">
exit
</button>
<button onclick="fruitsReset()">
reset
</button>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
function updateFruits(){
var fruits = ["Apple", "Orange", "Banana"];
var p = d3.select('#fruits').selectAll('p');
p.data(fruits).text(function(d) {return d;});
}
function enterFruits() {
var fruits = ["Apple", "Orange", "Banana", "strowberry"];
var p = d3.select('#fruits').selectAll('p');
var update = p.data(fruits);
var enter = update.enter();
update.text(function(d) {return d;});
enter.append('p').text(function(d) {return d;});
}
function exitFruits() {
var fruits = ["Apple", "Orange"];
var p = d3.select('#fruits').selectAll('p');
var update = p.data(fruits);
var exit = update.exit();
update.text(function(d) {return d;});
exit.remove();
}
function fruitsReset(){
d3.select('#fruits').selectAll('p').remove();
var fruits = ["リンゴ", "オレンジ", "バナナ"];
var p = d3.select('#fruits').selectAll('p');
var enter = p.data(fruits).enter();
enter.append('p').text(function(d) {return d;});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment