Skip to content

Instantly share code, notes, and snippets.

@Ronolibert

Ronolibert/.block

Created June 18, 2017 16:46
Show Gist options
  • Save Ronolibert/7b95693c6a2423f7ec7cbd09a6e5cec8 to your computer and use it in GitHub Desktop.
Save Ronolibert/7b95693c6a2423f7ec7cbd09a6e5cec8 to your computer and use it in GitHub Desktop.
Download ZIP
enterExitUpdate
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.chart {
background: lightgray;
border: 1px solid black;
min-width: 200px;
min-height: 350px;
}
</style>
</head>
<div class="chart">
<div>Billy</div>
<div>Cindy</div>
<div>Walter</div>
</div>
<body>
<script>
const scores = [
{ name: 'Alice', score: 96 },
{ name: 'Billy', score: 83 },
{ name: 'Cindy', score: 91 },
{ name: 'David', score: 96 },
{ name: 'Emily', score: 88 }
];
// returns update data and elements
const update = d3.select('.chart')
.selectAll('div')
.data(scores, function(d) {
return d ? d.name : this.innerHTML;
})
.style('color', 'red');
const enter = update.enter()
.append('div')
.text(d => d.name)
.style('color', 'green');
update.exit().remove();
// select both update and enter selections
update.merge(enter)
.style('width', d => d.score + 'px')
.style('height', '50px')
.style('background', 'lightgreen')
.style('border', '1px solid black');
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment