A demonstration of appending data to DOM elements based on pre-existing ids
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.circle {
fill: steelblue;
}
</style>
<div class="d3" id="foo"></div>
<div class="d3" id="bar"></div>
<div class="d3" id="baz"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [{name: 'bar', value: 5}, {name: 'foo', value: 10}, {name: 'baz', value: 15}];
var margin = {top: 5, right: 5, bottom: 5, left: 5},
width = 300 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
d3.selectAll('.d3').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('class','group')
.attr('id', function(){
return this.parentNode.parentNode.id;
});
d3.selectAll('.group').each(function() { this.__data__ = { name: this.id};});
d3.selectAll('.group')
.data(data, function(d){ return d.name; })
.append('circle')
.attr('class','circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', function(d){ return d.value; });
</script>