Skip to content

Instantly share code, notes, and snippets.

@bretdavidson

bretdavidson/index.html

Last active Dec 12, 2015
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>Data Join Demo</title>
<style>
#control {
margin-bottom: 20px;
}
#chart {
width:500px;
float:left;
}
#text {
width:300px;
float:left;
}
</style>
</head>
<body>
<div id="control"><button id="update">Update</button></div>
<div id="chart"></div>
<div id="text"></div>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.0-rc.3/lodash.min.js"></script>
<script>
(function() {
var data0,
data1,
height,
svg,
width;
data0 = [10, 15, 6, 18, 9],
data1 = [10, 15, 14, 20, 3, 30, 16],
width = 400,
height = 900;
// Append SVG to container
svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height);
// Swap data sets
function setData() {
var d = data0;
data0 = data1;
data1 = d;
return data1;
}
function update() {
var data,
rects,
x;
data = setData();
x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 350]);
rects = svg.selectAll('rect').data(data);
// Update old nodes
// See API Documentation for why this is necessary: https://github.com/mbostock/d3/wiki/Selections#wiki-enter
// This is one of the "rare cases" for running operations on existing (updating) nodes separately from new (entering) ones
rects.style('fill', 'steelblue')
console.log('ENTER', rects.enter());
// Enter
// Create new nodes
rects.enter()
.append('rect')
.style('fill', 'green');
// Update AND Enter
// Do operations common to both entering and updating nodes (transitions, size, etc.)
rects.transition().duration(500)
.attr('x', 20)
.attr('y', function (d, i) {return 65 * i;})
.attr('height', '60' )
.attr('width', function(d, i) {return x(d);});
console.log('EXIT', rects.exit());
// Exit
rects.exit()
.style('fill', 'red')
.transition().duration(2500)
.attr('width', 0)
.remove();
// Display Code Only for Demo
d3.select('#text')
.text(function () {
if (rects.enter()[0].length === 5) {
return 'ALL 5 Elements Are New';
} else {
var test1 = _.any(rects.enter()[0], Boolean)
if (test1) {
return 'Add 2 NEW Elements, UPDATE 5 Old Elements';
} else {
return 'REMOVE 2 Elements, UPDATE 5 Old Elements';
}
}
})
.style('font-size', '50px');
}
update();
d3.select('#update').on('click', function () {
update();
})
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.