Skip to content

Instantly share code, notes, and snippets.

@r-i-c-h

r-i-c-h/D3 Bound vs Unbound data appending

Created October 6, 2018 08:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save r-i-c-h/2f9e6a01f7c01f01d7ec7e6458a953cf to your computer and use it in GitHub Desktop.
Save r-i-c-h/2f9e6a01f7c01f01d7ec7e6458a953cf to your computer and use it in GitHub Desktop.
Download ZIP
d3: Show diff between adding a callback func or not in the data() join
Raw
D3 Bound vs Unbound data appending
<html><head><meta charset="utf-8">
<title>Data join with and without key function</title>
<style>
.contentBound, .contentNoFunc {position: relative; height: 40px; }
.contentBound div, .contentNoFunc div {position: absolute; }
</style></head>
<body>
<h1>With Data Callback Function</h1>
<div class="contentBound"></div>
<button onclick="addLetterBound();">Callback Function Bound Version</button>
<h1>NO Callback Function</h1>
<div class="contentNoFunc"></div>
<button onclick="addLetterNoFunc();">Unbound Version without callback</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var i = 25;
function addLetterBound() {
var myData = letters.slice(i).split('');
i--;
updateBoundData(myData);
}
function updateBoundData(data) {
var u = d3.select('.contentBound')
.selectAll('div')
.data(data, d => d); // <<<<<<<<<<<*********
u.enter()
.append('div')
.merge(u)
.transition()
.style('left', (d,i) => `${i * 32}px`)
.text(d => d);
}
function addLetterNoFunc() {
var myData = letters.slice(i).split('');
i--;
updateNoFunc(myData);
}
function updateNoFunc(data) {
var u = d3.select('.contentNoFunc')
.selectAll('div')
.data(data); // <<<<<<<<<<<*********
u.enter()
.append('div')
.merge(u)
.transition()
.style('left', (d,i) => `${i * 32}px`)
.text(d => d);
}
addLetterBound();
addLetterNoFunc();
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment