Database Reference
In-Depth Information
reason, the styling should be different for newly created elements (perhaps
to highlight them), simply modify the update selection before using the
enter selection.
Theexitselectionisusuallytheleastinterestingoftheselectionsbecausethe
only operation is typically to
remove
elements from the document. This is
sometimes combined with an animation of some kind—which is discussed
later in the “Animation” section—to make the effect less jarring.
Implementing a bar chart is a good way to see these selections in action. In
this case, the
mixin
is adjusted slightly to apply the
data-counter-bar
attribute. Because this has been done several times in this chapter, the code
is omitted for this example. Like the gauge element, each bar chart element
has an
<svg>
element appended and, in this case, is given a class to make it
easier to style for the bar chart:
$('*[data-counter-bar]').each(function(i,elt) {
var dim = fixup(elt)
var name = $(elt).attr("data-counter-bar");
var svg = d3.select(elt).append("svg")
.attr({
class:"barchart",
width:dim.width,
height:dim.height
});
Like the line chart example, an array of elements is maintained when new
data is entered. This is what will be bound to a selection and rendered into a
bar chart:
var dataLen= 30, max = 0;
var values = [];
$(document).on('data:'+name,function(event,data) {
if(data > max) max = data;
values.push(data);
if(values.length >= dataLen) values.shift();
This data array is then joined with a selection containing all of the
rectangles. A new rectangle is added to the selection (if needed), then all
of the rectangles are updated to their appropriate location and height. The
