Database Reference
In-Depth Information
public/javascripts/d3.js
initializes the dashboard; after fixing the
position of the wrapper class, D3 can be used to create an
<svg>
element
that can be used for further rendering:
$('*[data-counter-gauge]').each(function(i,elt) {
var dim = fixup(elt)
var name = $(elt).attr("data-counter-gauge");
var svg = d3.select(elt).append("svg");
Elements can also be inserted using the
insert
method, which takes a
before
statement in addition to the element to be inserted. For example, to
insert an element at the beginning of the child list rather than appending to
the end, use
insert(”<div>”,”:first-child”)
.
Finally, elements that have been selected can be removed from the
document using the
remove()
method.
Attributes and Styling
After an element has been selected, it can be modified using the
attr
and
style
methods of the selection. In the simple case, these methods
work similarly to their jQuery counterparts and modify the appropriate
aspects of the element. In the gauge example, they are used to establish the
appropriate class for the front and back gauge objects:
var g = svg.append("g")
.attr("transform",
"translate("+(dim.width/2)+","+(dim.height/2)+")");
var back = g.append("path").attr("class","d3back");
var front = g.append("path").attr("class","d3front");
In this case, the path elements are added to a
<g>
element rather than
directly to the
<svg>
element. This grouping element allows
transformations, such as a translation, to be easily applied to all groups. The
translation is used in this case to center the paths so that a shape generator
can be applied to each path.
Shape Generators
In D3, path elements like those in the previous section are usually combined
with a shape generator rather than described by hand. These generators
