elements var section = d3.selectAll("section"); // add an

element var h1 = section.append("h1"); h1.text("Hello!"); }}} === Enter, Update & Exit === ==== Enter ==== New data, for which there were no existing elements. {{{#!c var circle = svg.selectAll("circle") .data(data) .enter().append("circle"); .attr("cx", x) .attr("cy", y) .attr("r", 2.5); }}} ==== Update ==== New data that was joined successfully to an existing element. When updating, you might ignore enter and exit. {{{#!c var circle = svg.selectAll("circle") .data(data) .attr("cx", x) .attr("cy", y) .attr("r", 2.5); }}} ==== Exit ==== Existing elements, for which there were no new data. ==== Key Function ==== by default, the join is by index. {{{#!c var data = [ {name: "Alice", x: 10.0, y: 9.14}, {name: "Bob", x: 8.0, y: 8.14}, {name: "Carol", x: 13.0, y: 8.74}, {name: "Dave", x: 9.0, y: 8.77}, {name: "Edith", x: 11.0, y: 9.26}, }}} If needed, data should have a unique key for joining. {{{#!c function key(d) { return d.name; } var circle = svg.selectAll("circle"); .data(data, key) .attr("cx", x) .attr("cy", y) .attr("r", 2.5); }}} === Scale === ==== Quantitative Scales ==== Map a continuous (numeric) domain to a continuous range * linear * sqrt * pow * log * quantize * threshold * quantile * identity {{{#!c var x = d3.scale.linear() .domain([12, 24]) .range([0, 720]); x(16); // 240 }}} {{{#!c var x = d3.scale.sqrt() .domain([12, 24]) .range([0, 720]); x(16); // 268.9056992603583 }}} {{{#!c var x = d3.scale.log() .domain([12, 24]) .range([0, 720]); x(16); // 240 }}} ==== Domains & Ranges ==== {{{#!c var x = d3.scale.linear() .domain([0, d3.max(numbers)]) .range([0, 720]); }}} {{{#!c var x = d3.scale.log() .domain(d3.extent(number)) .range([0, 720]); }}} {{{#!c function value(d) { return d.value; } var x = d3.scale.log() .domain(d3.extent(object, value)) .range([0, 720]); }}} ==== Interpolators ==== Quantitative scales support multiple interpolators. {{{#!c var x = d3.scale.linear() .domain([12, 24]) .range(["steelblue", "brown"]); x(16); // #666586 }}} {{{#!c var x = d3.scale.linear() .domain([12, 24]) .range(["0px", "720px"]); x(16); // 240px }}} {{{#!c var x = d3.scale.linear() .domain([12, 24]) .range(["steelblue", "brown"]); .interpolate(d3.interpolateHsl); x(16); // #3cb05f }}} ==== Diverging Scales ==== Sometimes, you want a compound ("polylinear") scale. {{{#!c var x = d3.scale.linear() .domain([-10, 0, 100]) .range(["red", "white", "green"]); x(-5); // #ff8080 x(50); // #80c080 }}} ==== Ordinal Scales ==== An ordinal Scale is essentially an explicit mapping. {{{#!c var x = d3.scale.ordinal() .domain(["A", "B", "C", "D"]) .range([0, 10, 20, 30]); x("B"); // 10 }}} {{{#!c var x = d3.scale.category20() .domain(["A", "B", "C", "D"]) x("B"); // #aec7e8 x("E"); // #2ca02c x.domain(); // A, B, C, D, E }}} ==== Color Scale ==== * d3.scale.category10 * d3.scale.category20 * d3.scale.category20b * d3.scale.category20c ==== Ticks ==== {{{#!c var x = d3.scale.linear() .domain([12, 24]) .range([0, 720]); x.ticks(5); // [12, 14, 16, 18, 20, 22, 24] }}} === Axis === ==== Create ==== {{{#!c var yAxis = d3.svg.axis() .scale(y) .orient("left"); }}} ==== Render ==== {{{#!c svg.append("g") .attr("class", "y axis") .call(yAxis); }}} ==== Style ==== {{{#!c .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } }}} === Path === ==== SVG Paths ==== {{{#!c }}} ==== Path Generators ==== * d3.svg.line * d3.svg.area Create {{{#!c var x = d3.scale.linear(); y = d3.scale.linear(); var line = d3.svg.line() .x(function(d) { return x(d.x); }) .y(function(d) { return y(d.y); }); }}} Redner {{{#!c svg.append("path") .datum(objects) .attr("class", "line") .attr("d", line); }}} === Layouts === * d3.layout.treemap * d3.layout.tree * d3.layout.pack * d3.layout.partition * d3.layout.force * d3.layout.bundle * d3.layout.voronoi * d3.layout.chord * References http://bost.ocks.org/mike/d3/workshop/ ---- CategoryDocument