translate in transform
- move based on the original coordinates;
- (X,Y), X+, move to right，Y+, move to bottom;
- kinda like the RELATIVE position
Significant Comment
////////////////////////////////////////////
/////////// Initiate legend ////////////////
////////////////////////////////////////////
Append G
- group svg together
- mainly for transforming them together
Color Scale
- var colorscale = d3.scale.category10();....20 or whatever
竖排
- .attr("y", function(d, i){ return i * 20;})
no duplicate color assigning
- .style("fill", function(d, i){ return colorscale(i);})
draw legend
- set variables: w,h,colorscale,data in json,configuration
- append svg
- append title on svg
- append g, in g, do
- append rec
- append text
