D3心得

http://bost.ocks.org/mike/bar/
“Thinking with Joins”
1. DATA JOIN

The data join is a general pattern that can be used to create, update or destroy elements whenever data changes. It might feel odd, but the benefit of this approach is that you only have to learn and use a single pattern to manipulate the page. So whether you’re building a static chart or a dynamic one with fluid transitions and object constancy, your code remains roughly the same. Think of the initial selection as declaring the elements you want to exist (see “Thinking with Joins”).

Next we join the data (defined previously) to the selection using selection.data.

The data operator returns the update selection. The enter andexit selections hang off the update selection, so you can ignore them if you don’t need to add or remove elements.

http://bost.ocks.org/mike/bar/2/

2. SVG

A common point of confusion in SVG is distinguishing between properties that must be specified as attributes and properties that can be set as styles. The full list of styling properties is documented in the specification, but a quick rule of thumb is that geometry (such as the width of a rect element) must be specified as attributes, while aesthetics (such as a fill color) can be specified as styles. While you can use attributes for anything, I recommend you prefer styles for aesthetics; this ensures any inline styles play nicely with cascading stylesheets.

Tip: for successful render, doc format needs to be svg

var vbars = vChart.selectAll("g")

.data(data)

.enter().append("g")

.attr("transform", function(d,i) {

return "translate(" + i * barWidth + ",0)";

});

"g" here means group element

Add axis; transformation

Need to know more about interpretation and animation