Skip to content

Instantly share code, notes, and snippets.

@TheMcMurder
Created June 16, 2015 23:36
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 TheMcMurder/f4ad2eec0d19f8df0c93 to your computer and use it in GitHub Desktop.
Save TheMcMurder/f4ad2eec0d19f8df0c93 to your computer and use it in GitHub Desktop.
d3 Nest data example
<!DOCTYPE html>
<html>
<head>
<title>Nested Data example </title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="nested.js"></script>
</body>
</html>
var rootNode = d3.select('body').append('svg');
rootNode.attr('width', 1000).attr('height', 1000);
var data = [
{'radius': 5, 'color': 'green', 'text': 'hello'},
{'radius': 6, 'color': 'green', 'text': 'hello'},
{'radius': 7, 'color': 'green', 'text': 'hello'},
{'radius': 8, 'color': 'green', 'text': 'hello'},
{'radius': 9, 'color': 'green', 'text': 'hello'},
{'radius': 10, 'color': 'green', 'text': 'hello'}
];
var data2 = [
{'radius': 1, 'color': 'red', 'text': 'oh no'},
{'radius': 16, 'color': 'red', 'text': 'oh no'},
{'radius': 17, 'color': 'red', 'text': 'oh no'},
{'radius': 18, 'color': 'red', 'text': 'oh no'},
{'radius': 25, 'color': 'red', 'text': 'oh no'}
];
nestedBinding(data);
setTimeout(function (){
console.log('timeout called');
nestedBinding(data2);
}, 2000);
function nestedBinding(data){
console.log('bindDataBrokenUpdate data', data);
var allGroups = rootNode.selectAll('g').data(data);
var groupEnter = allGroups.enter().append('g');
allGroups.exit().remove();
groupEnter.attr('transform', function (d, i){
return 'translate('+ (50) +','+ ((i+1) * 50) +')';
});
groupEnter.append('circle')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', 0);
groupEnter.append('text');
var groupMerge = rootNode.selectAll('g');
// CANNOT use selectAll or the data is flattened (SelectAll on a SelectAll is bad)
groupMerge.select('circle').transition()
.attr('r', function (d){
return d.radius;
})
.style('fill',function (d){
return d.color;
});
// CANNOT use selectAll or the data is flattened (SelectAll on a SelectAll is bad)
groupMerge.select('text').transition()
.text(function (d){
return d.text;
});
}
function bindDataParentNode(data){
console.log('bindDataParentNode data', data);
var allGroups = rootNode.selectAll('g').data(data);
var groupEnter = allGroups.enter().append('g');
allGroups.exit().remove();
groupEnter.attr('transform', function (d, i){
return 'translate('+ (50) +','+ ((i+1) * 50) +')';
});
groupEnter.append('circle')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', 0);
groupEnter.append('text');
var groupMerge = rootNode.selectAll('g');
groupMerge.selectAll('circle').transition()
.attr('r', function (){
var data = d3.select(this.parentNode).data()[0];
return data.radius;
})
.style('fill',function (){
var data = d3.select(this.parentNode).data()[0];
return data.color;
});
groupMerge.selectAll('text').transition()
.text(function (){
var data = d3.select(this.parentNode).data()[0];
return data.text;
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment