github
/
d3
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge branch 'release'

This commit is contained in:
Mike Bostock 2011-11-29 21:57:58 -08:00
Родитель 817358a7b2 33ab885baa
Коммит fe671a70e2
108 изменённых файлов: 535 добавлений и 529 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

28
d3.js поставляемый
Просмотреть файл

@ -10,7 +10,7 @@ try {
d3_style_setProperty.call(this, name, value + "", priority); d3_style_setProperty.call(this, name, value + "", priority);
}; };
} }
d3 = {version: "2.6.0"}; // semver d3 = {version: "2.6.1"}; // semver
var d3_array = d3_arraySlice; // conversion for NodeLists var d3_array = d3_arraySlice; // conversion for NodeLists
function d3_arrayCopy(pseudoarray) { function d3_arrayCopy(pseudoarray) {
@ -977,9 +977,9 @@ function d3_interpolateByName(n) {
d3.interpolators = [ d3.interpolators = [
d3.interpolateObject, d3.interpolateObject,
function(a, b) { return (b instanceof Array) && d3.interpolateArray(a, b); }, function(a, b) { return (b instanceof Array) && d3.interpolateArray(a, b); },
function(a, b) { return (typeof b === "string") && d3.interpolateString(a + "", b); }, function(a, b) { return (typeof a === "string" || typeof b === "string") && d3.interpolateString(a + "", b + ""); },
function(a, b) { return (typeof b === "string" ? b in d3_rgb_names || /^(#|rgb\(|hsl\()/.test(b) : b instanceof d3_Rgb || b instanceof d3_Hsl) && d3.interpolateRgb(a + "", b); }, function(a, b) { return (typeof b === "string" ? b in d3_rgb_names || /^(#|rgb\(|hsl\()/.test(b) : b instanceof d3_Rgb || b instanceof d3_Hsl) && d3.interpolateRgb(a, b); },
function(a, b) { return (typeof b === "number") && d3.interpolateNumber(+a, b); } function(a, b) { return !isNaN(a = +a) && !isNaN(b = +b) && d3.interpolateNumber(a, b); }
]; ];
function d3_uninterpolateNumber(a, b) { function d3_uninterpolateNumber(a, b) {
b = b - (a = +a) ? 1 / (b - a) : 0; b = b - (a = +a) ? 1 / (b - a) : 0;
@ -2542,7 +2542,7 @@ function d3_scale_log(linear, log) {
if (arguments.length < 2) format = d3_scale_logFormat; if (arguments.length < 2) format = d3_scale_logFormat;
if (arguments.length < 1) return format; if (arguments.length < 1) return format;
var k = n / scale.ticks().length, var k = n / scale.ticks().length,
f = log === d3_scale_logn ? (e = -1e-15, Math.floor) : (e = 1e-15, Math.ceil), f = log === d3_scale_logn ? (e = -1e-12, Math.floor) : (e = 1e-12, Math.ceil),
e; e;
return function(d) { return function(d) {
return d / pow(f(log(d) + e)) < k ? format(d) : ""; return d / pow(f(log(d) + e)) < k ? format(d) : "";
@ -3646,7 +3646,7 @@ function d3_svg_mousePoint(container, e) {
var point = (container.ownerSVGElement || container).createSVGPoint(); var point = (container.ownerSVGElement || container).createSVGPoint();
if ((d3_mouse_bug44083 < 0) && (window.scrollX || window.scrollY)) { if ((d3_mouse_bug44083 < 0) && (window.scrollX || window.scrollY)) {
var svg = d3.select(document.body) var svg = d3.select(document.body)
.append("svg:svg") .append("svg")
.style("position", "absolute") .style("position", "absolute")
.style("top", 0) .style("top", 0)
.style("left", 0); .style("left", 0);
@ -3807,13 +3807,13 @@ d3.svg.axis = function() {
// Minor ticks. // Minor ticks.
var subticks = d3_svg_axisSubdivide(scale, ticks, tickSubdivide), var subticks = d3_svg_axisSubdivide(scale, ticks, tickSubdivide),
subtick = g.selectAll(".minor").data(subticks, String), subtick = g.selectAll(".minor").data(subticks, String),
subtickEnter = subtick.enter().insert("svg:line", "g").attr("class", "tick minor").style("opacity", 1e-6), subtickEnter = subtick.enter().insert("line", "g").attr("class", "tick minor").style("opacity", 1e-6),
subtickExit = transition(subtick.exit()).style("opacity", 1e-6).remove(), subtickExit = transition(subtick.exit()).style("opacity", 1e-6).remove(),
subtickUpdate = transition(subtick).style("opacity", 1); subtickUpdate = transition(subtick).style("opacity", 1);
// Major ticks. // Major ticks.
var tick = g.selectAll("g").data(ticks, String), var tick = g.selectAll("g").data(ticks, String),
tickEnter = tick.enter().insert("svg:g", "path").style("opacity", 1e-6), tickEnter = tick.enter().insert("g", "path").style("opacity", 1e-6),
tickExit = transition(tick.exit()).style("opacity", 1e-6).remove(), tickExit = transition(tick.exit()).style("opacity", 1e-6).remove(),
tickUpdate = transition(tick).style("opacity", 1), tickUpdate = transition(tick).style("opacity", 1),
tickTransform; tickTransform;
@ -3821,7 +3821,7 @@ d3.svg.axis = function() {
// Domain. // Domain.
var range = d3_scaleRange(scale), var range = d3_scaleRange(scale),
path = g.selectAll(".domain").data([0]), path = g.selectAll(".domain").data([0]),
pathEnter = path.enter().append("svg:path").attr("class", "domain"), pathEnter = path.enter().append("path").attr("class", "domain"),
pathUpdate = transition(path); pathUpdate = transition(path);
// Stash a snapshot of the new scale, and retrieve the old snapshot. // Stash a snapshot of the new scale, and retrieve the old snapshot.
@ -3829,8 +3829,8 @@ d3.svg.axis = function() {
scale0 = this.__chart__ || scale1; scale0 = this.__chart__ || scale1;
this.__chart__ = scale1; this.__chart__ = scale1;
tickEnter.append("svg:line").attr("class", "tick"); tickEnter.append("line").attr("class", "tick");
tickEnter.append("svg:text"); tickEnter.append("text");
tickUpdate.select("text").text(tickFormat); tickUpdate.select("text").text(tickFormat);
switch (orient) { switch (orient) {
@ -3991,19 +3991,19 @@ d3.svg.brush = function() {
e; e;
// An invisible, mouseable area for starting a new brush. // An invisible, mouseable area for starting a new brush.
bg.enter().append("svg:rect") bg.enter().append("rect")
.attr("class", "background") .attr("class", "background")
.style("visibility", "hidden") .style("visibility", "hidden")
.style("pointer-events", "all") .style("pointer-events", "all")
.style("cursor", "crosshair"); .style("cursor", "crosshair");
// The visible brush extent; style this as you like! // The visible brush extent; style this as you like!
fg.enter().append("svg:rect") fg.enter().append("rect")
.attr("class", "extent") .attr("class", "extent")
.style("cursor", "move"); .style("cursor", "move");
// More invisible rects for resizing the extent. // More invisible rects for resizing the extent.
tz.enter().append("svg:rect") tz.enter().append("rect")
.attr("class", function(d) { return "resize " + d; }) .attr("class", function(d) { return "resize " + d; })
.attr("width", 6) .attr("width", 6)
.attr("height", 6) .attr("height", 6)

4
d3.min.js поставляемый
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

8
examples/albers/albers.html
Просмотреть файл

@ -47,18 +47,18 @@ var xy = d3.geo.albers(),
path = d3.geo.path().projection(xy); path = d3.geo.path().projection(xy);
d3.select("body") d3.select("body")
.append("svg:svg") .append("svg")
.append("svg:g") .append("g")
.attr("id", "states"); .attr("id", "states");
d3.json("../data/us-states.json", function(collection) { d3.json("../data/us-states.json", function(collection) {
d3.select("#states") d3.select("#states")
.selectAll("path") .selectAll("path")
.data(collection.features) .data(collection.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", path); .attr("d", path);
d3.select("#states") d3.select("#states")
.append("svg:circle") .append("circle")
.attr("r", 10) .attr("r", 10)
.attr("transform", "translate(" + xy(xy.origin()).join(",") + ")") .attr("transform", "translate(" + xy(xy.origin()).join(",") + ")")
}); });

8
examples/area/area-radial.html
Просмотреть файл

@ -23,21 +23,21 @@
var r = 960 / 2, var r = 960 / 2,
data = d3.range(361).map(function(i) { return .8 + Math.sin(i / 20 * Math.PI) / 6; }); data = d3.range(361).map(function(i) { return .8 + Math.sin(i / 20 * Math.PI) / 6; });
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.data([data]) .data([data])
.attr("width", r * 2) .attr("width", r * 2)
.attr("height", r * 2) .attr("height", r * 2)
.append("svg:g") .append("g")
.attr("transform", "translate(" + r + "," + r + ")"); .attr("transform", "translate(" + r + "," + r + ")");
svg.append("svg:path") svg.append("path")
.attr("class", "area") .attr("class", "area")
.attr("d", d3.svg.area.radial() .attr("d", d3.svg.area.radial()
.innerRadius(r / 2) .innerRadius(r / 2)
.outerRadius(function(d) { return r * d; }) .outerRadius(function(d) { return r * d; })
.angle(function(d, i) { return i / 180 * Math.PI; })); .angle(function(d, i) { return i / 180 * Math.PI; }));
svg.append("svg:path") svg.append("path")
.attr("class", "line") .attr("class", "line")
.attr("d", d3.svg.line.radial() .attr("d", d3.svg.line.radial()
.radius(function(d) { return r * d; }) .radius(function(d) { return r * d; })

20
examples/area/area.html
Просмотреть файл

@ -48,53 +48,53 @@ var w = 450,
y = d3.scale.linear().domain([0, 1]).range([h, 0]); y = d3.scale.linear().domain([0, 1]).range([h, 0]);
var vis = d3.select("body") var vis = d3.select("body")
.append("svg:svg") .append("svg")
.data([data]) .data([data])
.attr("width", w + p * 2) .attr("width", w + p * 2)
.attr("height", h + p * 2) .attr("height", h + p * 2)
.append("svg:g") .append("g")
.attr("transform", "translate(" + p + "," + p + ")"); .attr("transform", "translate(" + p + "," + p + ")");
var rules = vis.selectAll("g.rule") var rules = vis.selectAll("g.rule")
.data(x.ticks(10)) .data(x.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "rule"); .attr("class", "rule");
rules.append("svg:line") rules.append("line")
.attr("x1", x) .attr("x1", x)
.attr("x2", x) .attr("x2", x)
.attr("y1", 0) .attr("y1", 0)
.attr("y2", h - 1); .attr("y2", h - 1);
rules.append("svg:line") rules.append("line")
.attr("class", function(d) { return d ? null : "axis"; }) .attr("class", function(d) { return d ? null : "axis"; })
.attr("y1", y) .attr("y1", y)
.attr("y2", y) .attr("y2", y)
.attr("x1", 0) .attr("x1", 0)
.attr("x2", w + 1); .attr("x2", w + 1);
rules.append("svg:text") rules.append("text")
.attr("x", x) .attr("x", x)
.attr("y", h + 3) .attr("y", h + 3)
.attr("dy", ".71em") .attr("dy", ".71em")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.text(x.tickFormat(10)); .text(x.tickFormat(10));
rules.append("svg:text") rules.append("text")
.attr("y", y) .attr("y", y)
.attr("x", -3) .attr("x", -3)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", "end") .attr("text-anchor", "end")
.text(y.tickFormat(10)); .text(y.tickFormat(10));
vis.append("svg:path") vis.append("path")
.attr("class", "area") .attr("class", "area")
.attr("d", d3.svg.area() .attr("d", d3.svg.area()
.x(function(d) { return x(d.x); }) .x(function(d) { return x(d.x); })
.y0(h - 1) .y0(h - 1)
.y1(function(d) { return y(d.y); })); .y1(function(d) { return y(d.y); }));
vis.append("svg:path") vis.append("path")
.attr("class", "line") .attr("class", "line")
.attr("d", d3.svg.line() .attr("d", d3.svg.line()
.x(function(d) { return x(d.x); }) .x(function(d) { return x(d.x); })
@ -102,7 +102,7 @@ vis.append("svg:path")
vis.selectAll("circle.area") vis.selectAll("circle.area")
.data(data) .data(data)
.enter().append("svg:circle") .enter().append("circle")
.attr("class", "area") .attr("class", "area")
.attr("cx", function(d) { return x(d.x); }) .attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); }) .attr("cy", function(d) { return y(d.y); })

8
examples/axis/axis-alternating.html
Просмотреть файл

@ -29,18 +29,18 @@ var m = [10, 10, 20, 10],
x = d3.scale.linear().domain([.05, .95]).range([0, w]), x = d3.scale.linear().domain([.05, .95]).range([0, w]),
y = d3.scale.linear().range([0, h]); y = d3.scale.linear().range([0, h]);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:g") svg.append("g")
.attr("class", "x minor") .attr("class", "x minor")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(d3.svg.axis().scale(x).tickSubdivide(2).tickSize(-6)); .call(d3.svg.axis().scale(x).tickSubdivide(2).tickSize(-6));
svg.append("svg:g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(d3.svg.axis().scale(x)); .call(d3.svg.axis().scale(x));

10
examples/axis/axis-ggplot2.html
Просмотреть файл

@ -43,22 +43,22 @@ var m = [10, 10, 20, 10],
x = d3.scale.linear().domain([.05, .95]).range([0, w]), x = d3.scale.linear().domain([.05, .95]).range([0, w]),
y = d3.scale.linear().range([0, h]); y = d3.scale.linear().range([0, h]);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:rect") svg.append("rect")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
svg.append("svg:g") svg.append("g")
.attr("class", "x grid") .attr("class", "x grid")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(d3.svg.axis().scale(x).tickSubdivide(1).tickSize(-h)); .call(d3.svg.axis().scale(x).tickSubdivide(1).tickSize(-h));
svg.append("svg:g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(d3.svg.axis().scale(x)); .call(d3.svg.axis().scale(x));

12
examples/axis/axis-multiples.html
Просмотреть файл

@ -82,30 +82,30 @@ d3.csv("../data/stocks.csv", function(data) {
// Add an SVG element for each symbol, with the desired dimensions and margin. // Add an SVG element for each symbol, with the desired dimensions and margin.
var svg = d3.select("body").selectAll("svg") var svg = d3.select("body").selectAll("svg")
.data(symbols) .data(symbols)
.enter().append("svg:svg") .enter().append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// Add the area path elements. Note: the y-domain is set per element. // Add the area path elements. Note: the y-domain is set per element.
svg.append("svg:path") svg.append("path")
.attr("class", "area") .attr("class", "area")
.attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); }); .attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); });
// Add the x-axis. // Add the x-axis.
svg.append("svg:g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(xAxis); .call(xAxis);
// Add the line path elements. Note: the y-domain is set per element. // Add the line path elements. Note: the y-domain is set per element.
svg.append("svg:path") svg.append("path")
.attr("class", "line") .attr("class", "line")
.attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); }); .attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); });
// Add a small label for the symbol name. // Add a small label for the symbol name.
svg.append("svg:text") svg.append("text")
.attr("x", w - 6) .attr("x", w - 6)
.attr("y", h - 6) .attr("y", h - 6)
.attr("text-anchor", "end") .attr("text-anchor", "end")

12
examples/axis/axis-orientations.html
Просмотреть файл

@ -34,26 +34,26 @@ var xAxis = d3.svg.axis()
var yAxis = d3.svg.axis() var yAxis = d3.svg.axis()
.scale(y); .scale(y);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:g") svg.append("g")
.attr("class", "bottom axis") .attr("class", "bottom axis")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(xAxis.orient("bottom")); .call(xAxis.orient("bottom"));
svg.append("svg:g") svg.append("g")
.attr("class", "top axis") .attr("class", "top axis")
.call(xAxis.orient("top")); .call(xAxis.orient("top"));
svg.append("svg:g") svg.append("g")
.attr("class", "left axis") .attr("class", "left axis")
.call(yAxis.orient("left")); .call(yAxis.orient("left"));
svg.append("svg:g") svg.append("g")
.attr("class", "right axis") .attr("class", "right axis")
.attr("transform", "translate(" + w + ",0)") .attr("transform", "translate(" + w + ",0)")
.call(yAxis.orient("right")); .call(yAxis.orient("right"));

18
examples/axis/axis-transition.html
Просмотреть файл

@ -91,45 +91,45 @@ d3.csv("../data/stocks.csv", function(data) {
y.domain([0, d3.max(values, function(d) { return d.price; })]); y.domain([0, d3.max(values, function(d) { return d.price; })]);
// Add an SVG element with the desired dimensions and margin. // Add an SVG element with the desired dimensions and margin.
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// Add the clip path. // Add the clip path.
svg.append("svg:clipPath") svg.append("clipPath")
.attr("id", "clip") .attr("id", "clip")
.append("svg:rect") .append("rect")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
// Add the area path. // Add the area path.
svg.append("svg:path") svg.append("path")
.attr("class", "area") .attr("class", "area")
.attr("clip-path", "url(#clip)") .attr("clip-path", "url(#clip)")
.attr("d", area(values)); .attr("d", area(values));
// Add the x-axis. // Add the x-axis.
svg.append("svg:g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(xAxis); .call(xAxis);
// Add the y-axis. // Add the y-axis.
svg.append("svg:g") svg.append("g")
.attr("class", "y axis") .attr("class", "y axis")
.attr("transform", "translate(" + w + ",0)") .attr("transform", "translate(" + w + ",0)")
.call(yAxis); .call(yAxis);
// Add the line path. // Add the line path.
svg.append("svg:path") svg.append("path")
.attr("class", "line") .attr("class", "line")
.attr("clip-path", "url(#clip)") .attr("clip-path", "url(#clip)")
.attr("d", line(values)); .attr("d", line(values));
// Add a small label for the symbol name. // Add a small label for the symbol name.
svg.append("svg:text") svg.append("text")
.attr("x", w - 6) .attr("x", w - 6)
.attr("y", h - 6) .attr("y", h - 6)
.attr("text-anchor", "end") .attr("text-anchor", "end")

6
examples/azimuthal/azimuthal.js
Просмотреть файл

@ -1,14 +1,14 @@
var xy = d3.geo.azimuthal().scale(240).mode("stereographic"), var xy = d3.geo.azimuthal().scale(240).mode("stereographic"),
circle = d3.geo.greatCircle(), circle = d3.geo.greatCircle(),
path = d3.geo.path().projection(xy), path = d3.geo.path().projection(xy),
svg = d3.select("body").append("svg:svg"); svg = d3.select("body").append("svg");
d3.json("../data/world-countries.json", function(collection) { d3.json("../data/world-countries.json", function(collection) {
svg.selectAll("path") svg.selectAll("path")
.data(collection.features) .data(collection.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", function(d) { return path(circle.clip(d)); }) .attr("d", function(d) { return path(circle.clip(d)); })
.append("svg:title") .append("title")
.text(function(d) { return d.properties.name; }); .text(function(d) { return d.properties.name; });
}); });

20
examples/bar/bar-hierarchy.html
Просмотреть файл

@ -44,24 +44,24 @@ var xAxis = d3.svg.axis()
.scale(x) .scale(x)
.orient("top"); .orient("top");
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:rect") svg.append("rect")
.attr("class", "background") .attr("class", "background")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.on("click", up); .on("click", up);
svg.append("svg:g") svg.append("g")
.attr("class", "x axis"); .attr("class", "x axis");
svg.append("svg:g") svg.append("g")
.attr("class", "y axis") .attr("class", "y axis")
.append("svg:line") .append("line")
.attr("y1", "100%"); .attr("y1", "100%");
d3.json("../data/flare.json", function(root) { d3.json("../data/flare.json", function(root) {
@ -185,23 +185,23 @@ function up(d) {
// Creates a set of bars for the given data node, at the specified index. // Creates a set of bars for the given data node, at the specified index.
function bar(d) { function bar(d) {
var bar = svg.insert("svg:g", ".y.axis") var bar = svg.insert("g", ".y.axis")
.attr("class", "enter") .attr("class", "enter")
.attr("transform", "translate(0,5)") .attr("transform", "translate(0,5)")
.selectAll("g") .selectAll("g")
.data(d.children) .data(d.children)
.enter().append("svg:g") .enter().append("g")
.style("cursor", function(d) { return !d.children ? null : "pointer"; }) .style("cursor", function(d) { return !d.children ? null : "pointer"; })
.on("click", down); .on("click", down);
bar.append("svg:text") bar.append("text")
.attr("x", -6) .attr("x", -6)
.attr("y", y / 2) .attr("y", y / 2)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", "end") .attr("text-anchor", "end")
.text(function(d) { return d.name; }); .text(function(d) { return d.name; });
bar.append("svg:rect") bar.append("rect")
.attr("width", function(d) { return x(d.value); }) .attr("width", function(d) { return x(d.value); })
.attr("height", y); .attr("height", y);

6
examples/bonne/bonne.html
Просмотреть файл

@ -46,15 +46,15 @@ div {
var xy = d3.geo.bonne(), var xy = d3.geo.bonne(),
path = d3.geo.path().projection(xy); path = d3.geo.path().projection(xy);
var countries = d3.select("body").append("svg:svg") var countries = d3.select("body").append("svg")
.attr("id", "countries"); .attr("id", "countries");
d3.json("../data/world-countries.json", function(collection) { d3.json("../data/world-countries.json", function(collection) {
countries.selectAll("path") countries.selectAll("path")
.data(collection.features) .data(collection.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", path) .attr("d", path)
.append("svg:title") .append("title")
.text(function(d) { return d.properties.name; }); .text(function(d) { return d.properties.name; });
}); });

4
examples/box/box.js
Просмотреть файл

@ -27,11 +27,11 @@ d3.csv("../data/morley.csv", function(csv) {
var vis = d3.select("#chart").selectAll("svg") var vis = d3.select("#chart").selectAll("svg")
.data(data) .data(data)
.enter().append("svg:svg") .enter().append("svg")
.attr("class", "box") .attr("class", "box")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")") .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
.call(chart); .call(chart);

12
examples/brush/brush-ordinal.html
Просмотреть файл

@ -48,24 +48,24 @@ var m = [10, 10, 20, 10],
var x = d3.scale.ordinal().domain(data).rangePoints([0, w], 1); var x = d3.scale.ordinal().domain(data).rangePoints([0, w], 1);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(d3.svg.axis().scale(x).orient("bottom")); .call(d3.svg.axis().scale(x).orient("bottom"));
var symbol = svg.append("svg:g").selectAll("path") var symbol = svg.append("g").selectAll("path")
.data(data) .data(data)
.enter().append("svg:path") .enter().append("path")
.attr("transform", function(d) { return "translate(" + x(d) + "," + (h / 2) + ")"; }) .attr("transform", function(d) { return "translate(" + x(d) + "," + (h / 2) + ")"; })
.attr("d", d3.svg.symbol().type(String).size(200)); .attr("d", d3.svg.symbol().type(String).size(200));
svg.append("svg:g") svg.append("g")
.attr("class", "brush") .attr("class", "brush")
.call(d3.svg.brush().x(x) .call(d3.svg.brush().x(x)
.on("brushstart", brushstart) .on("brushstart", brushstart)

10
examples/brush/brush-x.html
Просмотреть файл

@ -48,24 +48,24 @@ var m = [10, 10, 20, 10],
var x = d3.scale.linear().range([0, w]), var x = d3.scale.linear().range([0, w]),
y = d3.random.normal(h / 2, h / 8); y = d3.random.normal(h / 2, h / 8);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(d3.svg.axis().scale(x).orient("bottom")); .call(d3.svg.axis().scale(x).orient("bottom"));
var circle = svg.selectAll("circle") var circle = svg.selectAll("circle")
.data(data) .data(data)
.enter().append("svg:circle") .enter().append("circle")
.attr("transform", function(d) { return "translate(" + x(d) + "," + y() + ")"; }) .attr("transform", function(d) { return "translate(" + x(d) + "," + y() + ")"; })
.attr("r", 3.5); .attr("r", 3.5);
svg.append("svg:g") svg.append("g")
.attr("class", "brush") .attr("class", "brush")
.call(d3.svg.brush().x(x) .call(d3.svg.brush().x(x)
.on("brushstart", brushstart) .on("brushstart", brushstart)

10
examples/brush/brush-y.html
Просмотреть файл

@ -48,23 +48,23 @@ var m = [10, 10, 10, 40],
var x = d3.random.normal(w / 2, w / 8), var x = d3.random.normal(w / 2, w / 8),
y = d3.scale.linear().range([h, 0]); y = d3.scale.linear().range([h, 0]);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:g") svg.append("g")
.attr("class", "y axis") .attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left")); .call(d3.svg.axis().scale(y).orient("left"));
var circle = svg.selectAll("circle") var circle = svg.selectAll("circle")
.data(data) .data(data)
.enter().append("svg:circle") .enter().append("circle")
.attr("transform", function(d) { return "translate(" + x() + "," + y(d) + ")"; }) .attr("transform", function(d) { return "translate(" + x() + "," + y(d) + ")"; })
.attr("r", 3.5); .attr("r", 3.5);
svg.append("svg:g") svg.append("g")
.attr("class", "brush") .attr("class", "brush")
.call(d3.svg.brush().y(y) .call(d3.svg.brush().y(y)
.on("brushstart", brushstart) .on("brushstart", brushstart)

12
examples/brush/brush.html
Просмотреть файл

@ -49,28 +49,28 @@ var m = [10, 10, 20, 40],
var x = d3.scale.linear().range([0, w]), var x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([h, 0]); y = d3.scale.linear().range([h, 0]);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(d3.svg.axis().scale(x).orient("bottom")); .call(d3.svg.axis().scale(x).orient("bottom"));
svg.append("svg:g") svg.append("g")
.attr("class", "y axis") .attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left")); .call(d3.svg.axis().scale(y).orient("left"));
var circle = svg.selectAll("circle") var circle = svg.selectAll("circle")
.data(data) .data(data)
.enter().append("svg:circle") .enter().append("circle")
.attr("transform", function(d) { return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; }) .attr("transform", function(d) { return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; })
.attr("r", 3.5); .attr("r", 3.5);
svg.append("svg:g") svg.append("g")
.attr("class", "brush") .attr("class", "brush")
.call(d3.svg.brush().x(x).y(y) .call(d3.svg.brush().x(x).y(y)
.on("brushstart", brushstart) .on("brushstart", brushstart)

10
examples/bubble/bubble.js
Просмотреть файл

@ -6,7 +6,7 @@ var bubble = d3.layout.pack()
.sort(null) .sort(null)
.size([r, r]); .size([r, r]);
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", r) .attr("width", r)
.attr("height", r) .attr("height", r)
.attr("class", "bubble"); .attr("class", "bubble");
@ -15,18 +15,18 @@ d3.json("../data/flare.json", function(json) {
var node = vis.selectAll("g.node") var node = vis.selectAll("g.node")
.data(bubble.nodes(classes(json)) .data(bubble.nodes(classes(json))
.filter(function(d) { return !d.children; })) .filter(function(d) { return !d.children; }))
.enter().append("svg:g") .enter().append("g")
.attr("class", "node") .attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("svg:title") node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); }); .text(function(d) { return d.className + ": " + format(d.value); });
node.append("svg:circle") node.append("circle")
.attr("r", function(d) { return d.r; }) .attr("r", function(d) { return d.r; })
.style("fill", function(d) { return fill(d.packageName); }); .style("fill", function(d) { return fill(d.packageName); });
node.append("svg:text") node.append("text")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("dy", ".3em") .attr("dy", ".3em")
.text(function(d) { return d.className.substring(0, d.r / 3); }); .text(function(d) { return d.className.substring(0, d.r / 3); });

10
examples/bullet/bullet.js
Просмотреть файл

@ -10,23 +10,23 @@ d3.json("bullets.json", function(data) {
var vis = d3.select("#chart").selectAll("svg") var vis = d3.select("#chart").selectAll("svg")
.data(data) .data(data)
.enter().append("svg:svg") .enter().append("svg")
.attr("class", "bullet") .attr("class", "bullet")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")") .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
.call(chart); .call(chart);
var title = vis.append("svg:g") var title = vis.append("g")
.attr("text-anchor", "end") .attr("text-anchor", "end")
.attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")"); .attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")");
title.append("svg:text") title.append("text")
.attr("class", "title") .attr("class", "title")
.text(function(d) { return d.title; }); .text(function(d) { return d.title; });
title.append("svg:text") title.append("text")
.attr("class", "subtitle") .attr("class", "subtitle")
.attr("dy", "1em") .attr("dy", "1em")
.text(function(d) { return d.subtitle; }); .text(function(d) { return d.subtitle; });

10
examples/bundle/bundle-radial.js
Просмотреть файл

@ -14,10 +14,10 @@ var line = d3.svg.line.radial()
.radius(function(d) { return d.y; }) .radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; }); .angle(function(d) { return d.x / 180 * Math.PI; });
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", r * 2) .attr("width", r * 2)
.attr("height", r * 2) .attr("height", r * 2)
.append("svg:g") .append("g")
.attr("transform", "translate(" + r + "," + r + ")"); .attr("transform", "translate(" + r + "," + r + ")");
d3.json("../data/flare-imports.json", function(classes) { d3.json("../data/flare-imports.json", function(classes) {
@ -26,16 +26,16 @@ d3.json("../data/flare-imports.json", function(classes) {
vis.selectAll("path.link") vis.selectAll("path.link")
.data(splines = bundle(links)) .data(splines = bundle(links))
.enter().append("svg:path") .enter().append("path")
.attr("class", "link") .attr("class", "link")
.attr("d", line); .attr("d", line);
vis.selectAll("g.node") vis.selectAll("g.node")
.data(nodes.filter(function(n) { return !n.children; })) .data(nodes.filter(function(n) { return !n.children; }))
.enter().append("svg:g") .enter().append("g")
.attr("class", "node") .attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.append("svg:text") .append("text")
.attr("dx", function(d) { return d.x < 180 ? 8 : -8; }) .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
.attr("dy", ".31em") .attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })

4
examples/bundle/bundle-treemap.js
Просмотреть файл

@ -32,13 +32,13 @@ d3.json("../data/flare-imports.json", function(classes) {
.call(cell) .call(cell)
.text(function(d) { return d.children ? null : d.key; }); .text(function(d) { return d.children ? null : d.key; });
div.append("svg:svg") div.append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.style("position", "absolute") .style("position", "absolute")
.selectAll("path.link") .selectAll("path.link")
.data(bundle(links)) .data(bundle(links))
.enter().append("svg:path") .enter().append("path")
.style("stroke", function(d) { return stroke(d[0].value); }) .style("stroke", function(d) { return stroke(d[0].value); })
.attr("class", "link") .attr("class", "link")
.attr("d", line); .attr("d", line);

16
examples/calendar/dji-area.html
Просмотреть файл

@ -68,13 +68,13 @@ var area = d3.svg.area()
.y0(y(0)) .y0(y(0))
.y1(function(d) { return y(d.Close); }); .y1(function(d) { return y(d.Close); });
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
svg.append("svg:rect") svg.append("rect")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
@ -90,27 +90,27 @@ d3.csv("dji.csv", function(data) {
x.domain([data[0].Date, data[data.length - 1].Date]); x.domain([data[0].Date, data[data.length - 1].Date]);
y.domain([0, d3.max(data, function(d) { return d.Close; })]); y.domain([0, d3.max(data, function(d) { return d.Close; })]);
svg.append("svg:g") svg.append("g")
.attr("class", "x grid") .attr("class", "x grid")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(xAxis.tickSubdivide(1).tickSize(-h)); .call(xAxis.tickSubdivide(1).tickSize(-h));
svg.append("svg:g") svg.append("g")
.attr("class", "y grid") .attr("class", "y grid")
.attr("transform", "translate(" + w + ",0)") .attr("transform", "translate(" + w + ",0)")
.call(yAxis.tickSubdivide(1).tickSize(-w)); .call(yAxis.tickSubdivide(1).tickSize(-w));
svg.append("svg:g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + h + ")") .attr("transform", "translate(0," + h + ")")
.call(xAxis.tickSubdivide(0).tickSize(6)); .call(xAxis.tickSubdivide(0).tickSize(6));
svg.append("svg:g") svg.append("g")
.attr("class", "y axis") .attr("class", "y axis")
.attr("transform", "translate(" + w + ",0)") .attr("transform", "translate(" + w + ",0)")
.call(yAxis.tickSubdivide(0).tickSize(6)); .call(yAxis.tickSubdivide(0).tickSize(6));
svg.append("svg:path") svg.append("path")
.attr("class", "area") .attr("class", "area")
.attr("d", area(data)); .attr("d", area(data));
}); });

12
examples/calendar/dji.js
Просмотреть файл

@ -14,21 +14,21 @@ var color = d3.scale.quantize()
var svg = d3.select("#chart").selectAll("svg") var svg = d3.select("#chart").selectAll("svg")
.data(d3.range(1990, 2011)) .data(d3.range(1990, 2011))
.enter().append("svg:svg") .enter().append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.attr("class", "RdYlGn") .attr("class", "RdYlGn")
.append("svg:g") .append("g")
.attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")"); .attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")");
svg.append("svg:text") svg.append("text")
.attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)") .attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.text(String); .text(String);
var rect = svg.selectAll("rect.day") var rect = svg.selectAll("rect.day")
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("svg:rect") .enter().append("rect")
.attr("class", "day") .attr("class", "day")
.attr("width", z) .attr("width", z)
.attr("height", z) .attr("height", z)
@ -37,7 +37,7 @@ var rect = svg.selectAll("rect.day")
svg.selectAll("path.month") svg.selectAll("path.month")
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("svg:path") .enter().append("path")
.attr("class", "month") .attr("class", "month")
.attr("d", monthPath); .attr("d", monthPath);
@ -49,7 +49,7 @@ d3.csv("dji.csv", function(csv) {
rect rect
.attr("class", function(d) { return "day q" + color(data[format(d)]) + "-9"; }) .attr("class", function(d) { return "day q" + color(data[format(d)]) + "-9"; })
.append("svg:title") .append("title")
.text(function(d) { return (d = format(d)) + (d in data ? ": " + percent(data[d]) : ""); }); .text(function(d) { return (d = format(d)) + (d in data ? ": " + percent(data[d]) : ""); });
}); });

12
examples/calendar/vix.js
Просмотреть файл

@ -12,21 +12,21 @@ var color = d3.scale.quantile()
var svg = d3.select("#chart").selectAll("svg") var svg = d3.select("#chart").selectAll("svg")
.data(d3.range(1993, 2011)) .data(d3.range(1993, 2011))
.enter().append("svg:svg") .enter().append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.attr("class", "RdYlGn") .attr("class", "RdYlGn")
.append("svg:g") .append("g")
.attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")"); .attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")");
svg.append("svg:text") svg.append("text")
.attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)") .attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.text(String); .text(String);
var rect = svg.selectAll("rect.day") var rect = svg.selectAll("rect.day")
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("svg:rect") .enter().append("rect")
.attr("class", "day") .attr("class", "day")
.attr("width", z) .attr("width", z)
.attr("height", z) .attr("height", z)
@ -35,7 +35,7 @@ var rect = svg.selectAll("rect.day")
svg.selectAll("path.month") svg.selectAll("path.month")
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("svg:path") .enter().append("path")
.attr("class", "month") .attr("class", "month")
.attr("d", monthPath); .attr("d", monthPath);
@ -49,7 +49,7 @@ d3.csv("vix.csv", function(csv) {
rect rect
.attr("class", function(d) { return "day q" + color(data[format(d)]) + "-9"; }) .attr("class", function(d) { return "day q" + color(data[format(d)]) + "-9"; })
.append("svg:title") .append("title")
.text(function(d) { return (d = format(d)) + (d in data ? ": " + data[d] : ""); }); .text(function(d) { return (d = format(d)) + (d in data ? ": " + data[d] : ""); });
}); });

14
examples/cartogram/cartogram.js
Просмотреть файл

@ -6,7 +6,7 @@ var data = [
.169, , .132, .167, .139, .184, .159, .14, .146, .157, , .139, .183, .16, .143 .169, , .132, .167, .139, .184, .159, .14, .146, .157, , .139, .183, .16, .143
]; ];
var svg = d3.select("#chart").append("svg:svg") var svg = d3.select("#chart").append("svg")
.attr("width", 960) .attr("width", 960)
.attr("height", 500); .attr("height", 500);
@ -14,27 +14,27 @@ d3.json("../data/us-states.json", function(json) {
var path = d3.geo.path(); var path = d3.geo.path();
// A thick black stroke for the exterior. // A thick black stroke for the exterior.
svg.append("svg:g") svg.append("g")
.attr("class", "black") .attr("class", "black")
.selectAll("path") .selectAll("path")
.data(json.features) .data(json.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", path); .attr("d", path);
// A white overlay to hide interior black strokes. // A white overlay to hide interior black strokes.
svg.append("svg:g") svg.append("g")
.attr("class", "white") .attr("class", "white")
.selectAll("path") .selectAll("path")
.data(json.features) .data(json.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", path); .attr("d", path);
// The polygons, scaled! // The polygons, scaled!
svg.append("svg:g") svg.append("g")
.attr("class", "grey") .attr("class", "grey")
.selectAll("path") .selectAll("path")
.data(json.features) .data(json.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", path) .attr("d", path)
.attr("transform", function(d) { .attr("transform", function(d) {
var centroid = path.centroid(d), var centroid = path.centroid(d),

4
examples/cartogram/demers.js
Просмотреть файл

@ -15,7 +15,7 @@ var force = d3.layout.force()
.gravity(0) .gravity(0)
.size([960, 500]); .size([960, 500]);
var svg = d3.select("#chart").append("svg:svg"); var svg = d3.select("#chart").append("svg");
d3.json("../data/us-state-centroids.json", function(states) { d3.json("../data/us-state-centroids.json", function(states) {
var project = d3.geo.albersUsa(), var project = d3.geo.albersUsa(),
@ -70,7 +70,7 @@ d3.json("../data/us-state-centroids.json", function(states) {
svg.selectAll("rect") svg.selectAll("rect")
.data(nodes) .data(nodes)
.enter().append("svg:rect") .enter().append("rect")
.style("fill", function(d) { return color(d.value); }) .style("fill", function(d) { return color(d.value); })
.attr("x", function(d) { return d.x - d.r; }) .attr("x", function(d) { return d.x - d.r; })
.attr("y", function(d) { return d.y - d.r; }) .attr("y", function(d) { return d.y - d.r; })

6
examples/cartogram/dorling.js
Просмотреть файл

@ -15,10 +15,10 @@ var force = d3.layout.force()
.gravity(0) .gravity(0)
.size([960, 500]); .size([960, 500]);
var svg = d3.select("#chart").append("svg:svg") var svg = d3.select("#chart").append("svg")
.attr("width", 960 + 100) .attr("width", 960 + 100)
.attr("height", 500 + 100) .attr("height", 500 + 100)
.append("svg:g") .append("g")
.attr("transform", "translate(50,50)"); .attr("transform", "translate(50,50)");
d3.json("../data/us-state-centroids.json", function(states) { d3.json("../data/us-state-centroids.json", function(states) {
@ -72,7 +72,7 @@ d3.json("../data/us-state-centroids.json", function(states) {
svg.selectAll("circle") svg.selectAll("circle")
.data(nodes) .data(nodes)
.enter().append("svg:circle") .enter().append("circle")
.style("fill", function(d) { return color(d.value); }) .style("fill", function(d) { return color(d.value); })
.attr("cx", function(d) { return d.x; }) .attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; }) .attr("cy", function(d) { return d.y; })

12
examples/chord/chord-flare.html
Просмотреть файл

@ -34,10 +34,10 @@ var arc = d3.svg.arc()
.innerRadius(r0) .innerRadius(r0)
.outerRadius(r0 + 20); .outerRadius(r0 + 20);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", r1 * 2) .attr("width", r1 * 2)
.attr("height", r1 * 2) .attr("height", r1 * 2)
.append("svg:g") .append("g")
.attr("transform", "translate(" + r1 + "," + r1 + ")"); .attr("transform", "translate(" + r1 + "," + r1 + ")");
d3.json("../data/flare-imports.json", function(imports) { d3.json("../data/flare-imports.json", function(imports) {
@ -75,15 +75,15 @@ d3.json("../data/flare-imports.json", function(imports) {
var g = svg.selectAll("g.group") var g = svg.selectAll("g.group")
.data(chord.groups) .data(chord.groups)
.enter().append("svg:g") .enter().append("g")
.attr("class", "group"); .attr("class", "group");
g.append("svg:path") g.append("path")
.style("fill", function(d) { return fill(d.index); }) .style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); }) .style("stroke", function(d) { return fill(d.index); })
.attr("d", arc); .attr("d", arc);
g.append("svg:text") g.append("text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; }) .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
@ -96,7 +96,7 @@ d3.json("../data/flare-imports.json", function(imports) {
svg.selectAll("path.chord") svg.selectAll("path.chord")
.data(chord.chords) .data(chord.chords)
.enter().append("svg:path") .enter().append("path")
.attr("class", "chord") .attr("class", "chord")
.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); }) .style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
.style("fill", function(d) { return fill(d.source.index); }) .style("fill", function(d) { return fill(d.source.index); })

22
examples/chord/chord.js
Просмотреть файл

@ -19,42 +19,42 @@ var fill = d3.scale.ordinal()
.range(["#000000", "#FFDD89", "#957244", "#F26223"]); .range(["#000000", "#FFDD89", "#957244", "#F26223"]);
var svg = d3.select("#chart") var svg = d3.select("#chart")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")"); .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
svg.append("svg:g") svg.append("g")
.selectAll("path") .selectAll("path")
.data(chord.groups) .data(chord.groups)
.enter().append("svg:path") .enter().append("path")
.style("fill", function(d) { return fill(d.index); }) .style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); }) .style("stroke", function(d) { return fill(d.index); })
.attr("d", d3.svg.arc().innerRadius(r0).outerRadius(r1)) .attr("d", d3.svg.arc().innerRadius(r0).outerRadius(r1))
.on("mouseover", fade(.1)) .on("mouseover", fade(.1))
.on("mouseout", fade(1)); .on("mouseout", fade(1));
var ticks = svg.append("svg:g") var ticks = svg.append("g")
.selectAll("g") .selectAll("g")
.data(chord.groups) .data(chord.groups)
.enter().append("svg:g") .enter().append("g")
.selectAll("g") .selectAll("g")
.data(groupTicks) .data(groupTicks)
.enter().append("svg:g") .enter().append("g")
.attr("transform", function(d) { .attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + r1 + ",0)"; + "translate(" + r1 + ",0)";
}); });
ticks.append("svg:line") ticks.append("line")
.attr("x1", 1) .attr("x1", 1)
.attr("y1", 0) .attr("y1", 0)
.attr("x2", 5) .attr("x2", 5)
.attr("y2", 0) .attr("y2", 0)
.style("stroke", "#000"); .style("stroke", "#000");
ticks.append("svg:text") ticks.append("text")
.attr("x", 8) .attr("x", 8)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", function(d) { .attr("text-anchor", function(d) {
@ -65,11 +65,11 @@ ticks.append("svg:text")
}) })
.text(function(d) { return d.label; }); .text(function(d) { return d.label; });
svg.append("svg:g") svg.append("g")
.attr("class", "chord") .attr("class", "chord")
.selectAll("path") .selectAll("path")
.data(chord.chords) .data(chord.chords)
.enter().append("svg:path") .enter().append("path")
.style("fill", function(d) { return fill(d.target.index); }) .style("fill", function(d) { return fill(d.target.index); })
.attr("d", d3.svg.chord().radius(r0)) .attr("d", d3.svg.chord().radius(r0))
.style("opacity", 1); .style("opacity", 1);

8
examples/choropleth/choropleth-area.html
Просмотреть файл

@ -20,12 +20,12 @@ svg {
<script type="text/javascript"> <script type="text/javascript">
var svg = d3.select("body") var svg = d3.select("body")
.append("svg:svg") .append("svg")
.call(d3.behavior.zoom() .call(d3.behavior.zoom()
.on("zoom", redraw)) .on("zoom", redraw))
.append("svg:g"); .append("g");
var counties = svg.append("svg:g") var counties = svg.append("g")
.attr("id", "counties"); .attr("id", "counties");
var path = d3.geo.path(); var path = d3.geo.path();
@ -37,7 +37,7 @@ var fill = d3.scale.log()
d3.json("../data/us-counties.json", function(json) { d3.json("../data/us-counties.json", function(json) {
counties.selectAll("path") counties.selectAll("path")
.data(json.features) .data(json.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", path) .attr("d", path)
.attr("fill", function(d) { return fill(path.area(d)); }); .attr("fill", function(d) { return fill(path.area(d)); });
}); });

6
examples/choropleth/choropleth-bounds.html
Просмотреть файл

@ -22,9 +22,9 @@ svg {
<script type="text/javascript"> <script type="text/javascript">
var svg = d3.select("body") var svg = d3.select("body")
.append("svg:svg"); .append("svg");
var counties = svg.append("svg:g") var counties = svg.append("g")
.attr("id", "counties"); .attr("id", "counties");
var path = d3.geo.path(); var path = d3.geo.path();
@ -32,7 +32,7 @@ var path = d3.geo.path();
d3.json("../data/us-counties.json", function(json) { d3.json("../data/us-counties.json", function(json) {
counties.selectAll("path") counties.selectAll("path")
.data(json.features) .data(json.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", function(d) { .attr("d", function(d) {
return path({ return path({
type: "LineString", type: "LineString",

10
examples/choropleth/choropleth.js
Просмотреть файл

@ -3,19 +3,19 @@ var data; // loaded asynchronously
var path = d3.geo.path(); var path = d3.geo.path();
var svg = d3.select("#chart") var svg = d3.select("#chart")
.append("svg:svg"); .append("svg");
var counties = svg.append("svg:g") var counties = svg.append("g")
.attr("id", "counties") .attr("id", "counties")
.attr("class", "Blues"); .attr("class", "Blues");
var states = svg.append("svg:g") var states = svg.append("g")
.attr("id", "states"); .attr("id", "states");
d3.json("../data/us-counties.json", function(json) { d3.json("../data/us-counties.json", function(json) {
counties.selectAll("path") counties.selectAll("path")
.data(json.features) .data(json.features)
.enter().append("svg:path") .enter().append("path")
.attr("class", data ? quantize : null) .attr("class", data ? quantize : null)
.attr("d", path); .attr("d", path);
}); });
@ -23,7 +23,7 @@ d3.json("../data/us-counties.json", function(json) {
d3.json("../data/us-states.json", function(json) { d3.json("../data/us-states.json", function(json) {
states.selectAll("path") states.selectAll("path")
.data(json.features) .data(json.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", path); .attr("d", path);
}); });

10
examples/clock/clock.js
Просмотреть файл

@ -22,21 +22,21 @@ var arc = d3.svg.arc()
.innerRadius(function(d) { return d.index * r; }) .innerRadius(function(d) { return d.index * r; })
.outerRadius(function(d) { return (d.index + s) * r; }); .outerRadius(function(d) { return (d.index + s) * r; });
var vis = d3.select("#clock").append("svg:svg") var vis = d3.select("#clock").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")"); .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
var g = vis.selectAll("g") var g = vis.selectAll("g")
.data(fields) .data(fields)
.enter().append("svg:g"); .enter().append("g");
g.append("svg:path") g.append("path")
.style("fill", function(d) { return fill(d.value); }) .style("fill", function(d) { return fill(d.value); })
.attr("d", arc); .attr("d", arc);
g.append("svg:text") g.append("text")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("dy", "1em") .attr("dy", "1em")
.text(function(d) { return d.text; }); .text(function(d) { return d.text; });

12
examples/cluster/cluster-radial.js
Просмотреть файл

@ -6,10 +6,10 @@ var cluster = d3.layout.cluster()
var diagonal = d3.svg.diagonal.radial() var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", r * 2) .attr("width", r * 2)
.attr("height", r * 2) .attr("height", r * 2)
.append("svg:g") .append("g")
.attr("transform", "translate(" + r + "," + r + ")"); .attr("transform", "translate(" + r + "," + r + ")");
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
@ -17,20 +17,20 @@ d3.json("../data/flare.json", function(json) {
var link = vis.selectAll("path.link") var link = vis.selectAll("path.link")
.data(cluster.links(nodes)) .data(cluster.links(nodes))
.enter().append("svg:path") .enter().append("path")
.attr("class", "link") .attr("class", "link")
.attr("d", diagonal); .attr("d", diagonal);
var node = vis.selectAll("g.node") var node = vis.selectAll("g.node")
.data(nodes) .data(nodes)
.enter().append("svg:g") .enter().append("g")
.attr("class", "node") .attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
node.append("svg:circle") node.append("circle")
.attr("r", 4.5); .attr("r", 4.5);
node.append("svg:text") node.append("text")
.attr("dx", function(d) { return d.x < 180 ? 8 : -8; }) .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
.attr("dy", ".31em") .attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })

12
examples/cluster/cluster.js
Просмотреть файл

@ -7,10 +7,10 @@ var cluster = d3.layout.cluster()
var diagonal = d3.svg.diagonal() var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; }); .projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(40, 0)"); .attr("transform", "translate(40, 0)");
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
@ -18,20 +18,20 @@ d3.json("../data/flare.json", function(json) {
var link = vis.selectAll("path.link") var link = vis.selectAll("path.link")
.data(cluster.links(nodes)) .data(cluster.links(nodes))
.enter().append("svg:path") .enter().append("path")
.attr("class", "link") .attr("class", "link")
.attr("d", diagonal); .attr("d", diagonal);
var node = vis.selectAll("g.node") var node = vis.selectAll("g.node")
.data(nodes) .data(nodes)
.enter().append("svg:g") .enter().append("g")
.attr("class", "node") .attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("svg:circle") node.append("circle")
.attr("r", 4.5); .attr("r", 4.5);
node.append("svg:text") node.append("text")
.attr("dx", function(d) { return d.children ? -8 : 8; }) .attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3) .attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; }) .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })

8
examples/contour/contour.html
Просмотреть файл

@ -64,18 +64,18 @@ function translateX(d, i) { return "translate("+(i*sz)+",0)"; }
function scale(p) { return [p[0]*sz, p[1]*sz]; } function scale(p) { return [p[0]*sz, p[1]*sz]; }
var svg = d3.select("body") var svg = d3.select("body")
.append("svg:svg") .append("svg")
.attr("width", dw*sz) .attr("width", dw*sz)
.attr("height", dh*sz); .attr("height", dh*sz);
var g = svg.selectAll("g") var g = svg.selectAll("g")
.data(data) .data(data)
.enter().append("svg:g") .enter().append("g")
.attr("transform", translateY); .attr("transform", translateY);
g.selectAll("rect") g.selectAll("rect")
.data(function(d) { return d; }) .data(function(d) { return d; })
.enter().append("svg:rect") .enter().append("rect")
.attr("transform", translateX) .attr("transform", translateX)
.attr("width", sz) .attr("width", sz)
.attr("height", sz) .attr("height", sz)
@ -88,7 +88,7 @@ function contour(grid, start) {
svg.selectAll("path") svg.selectAll("path")
.data([d3.geom.contour(grid, start).map(scale)]) .data([d3.geom.contour(grid, start).map(scale)])
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }) .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.enter().append("svg:path") .enter().append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }); .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
} }

16
examples/crimea/crimea-stacked-area.html
Просмотреть файл

@ -36,10 +36,10 @@ var p = [20, 50, 30, 20],
parse = d3.time.format("%m/%Y").parse, parse = d3.time.format("%m/%Y").parse,
format = d3.time.format("%b"); format = d3.time.format("%b");
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(" + p[3] + "," + p[0] + ")"); .attr("transform", "translate(" + p[3] + "," + p[0] + ")");
d3.csv("crimea.csv", function(crimea) { d3.csv("crimea.csv", function(crimea) {
@ -58,7 +58,7 @@ d3.csv("crimea.csv", function(crimea) {
// Add an area for each cause. // Add an area for each cause.
svg.selectAll("path.area") svg.selectAll("path.area")
.data(causes) .data(causes)
.enter().append("svg:path") .enter().append("path")
.attr("class", "area") .attr("class", "area")
.style("fill", function(d, i) { return z(i); }) .style("fill", function(d, i) { return z(i); })
.attr("d", d3.svg.area() .attr("d", d3.svg.area()
@ -69,7 +69,7 @@ d3.csv("crimea.csv", function(crimea) {
// Add a line for each cause. // Add a line for each cause.
svg.selectAll("path.line") svg.selectAll("path.line")
.data(causes) .data(causes)
.enter().append("svg:path") .enter().append("path")
.attr("class", "line") .attr("class", "line")
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); }) .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); })
.attr("d", d3.svg.line() .attr("d", d3.svg.line()
@ -79,7 +79,7 @@ d3.csv("crimea.csv", function(crimea) {
// Add a label per date. // Add a label per date.
svg.selectAll("text") svg.selectAll("text")
.data(x.ticks(12)) .data(x.ticks(12))
.enter().append("svg:text") .enter().append("text")
.attr("x", x) .attr("x", x)
.attr("y", h + 6) .attr("y", h + 6)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
@ -89,16 +89,16 @@ d3.csv("crimea.csv", function(crimea) {
// Add y-axis rules. // Add y-axis rules.
var rule = svg.selectAll("g.rule") var rule = svg.selectAll("g.rule")
.data(y.ticks(5)) .data(y.ticks(5))
.enter().append("svg:g") .enter().append("g")
.attr("class", "rule") .attr("class", "rule")
.attr("transform", function(d) { return "translate(0," + y(d) + ")"; }); .attr("transform", function(d) { return "translate(0," + y(d) + ")"; });
rule.append("svg:line") rule.append("line")
.attr("x2", w) .attr("x2", w)
.style("stroke", function(d) { return d ? "#fff" : "#000"; }) .style("stroke", function(d) { return d ? "#fff" : "#000"; })
.style("stroke-opacity", function(d) { return d ? .7 : null; }); .style("stroke-opacity", function(d) { return d ? .7 : null; });
rule.append("svg:text") rule.append("text")
.attr("x", w + 6) .attr("x", w + 6)
.attr("dy", ".35em") .attr("dy", ".35em")
.text(d3.format(",d")); .text(d3.format(",d"));

16
examples/crimea/crimea-stacked-bar.html
Просмотреть файл

@ -29,10 +29,10 @@ var p = [20, 50, 30, 20],
parse = d3.time.format("%m/%Y").parse, parse = d3.time.format("%m/%Y").parse,
format = d3.time.format("%b"); format = d3.time.format("%b");
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(" + p[3] + "," + (h + p[0]) + ")"); .attr("transform", "translate(" + p[3] + "," + (h + p[0]) + ")");
d3.csv("crimea.csv", function(crimea) { d3.csv("crimea.csv", function(crimea) {
@ -51,7 +51,7 @@ d3.csv("crimea.csv", function(crimea) {
// Add a group for each cause. // Add a group for each cause.
var cause = svg.selectAll("g.cause") var cause = svg.selectAll("g.cause")
.data(causes) .data(causes)
.enter().append("svg:g") .enter().append("g")
.attr("class", "cause") .attr("class", "cause")
.style("fill", function(d, i) { return z(i); }) .style("fill", function(d, i) { return z(i); })
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); }); .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });
@ -59,7 +59,7 @@ d3.csv("crimea.csv", function(crimea) {
// Add a rect for each date. // Add a rect for each date.
var rect = cause.selectAll("rect") var rect = cause.selectAll("rect")
.data(Object) .data(Object)
.enter().append("svg:rect") .enter().append("rect")
.attr("x", function(d) { return x(d.x); }) .attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return -y(d.y0) - y(d.y); }) .attr("y", function(d) { return -y(d.y0) - y(d.y); })
.attr("height", function(d) { return y(d.y); }) .attr("height", function(d) { return y(d.y); })
@ -68,7 +68,7 @@ d3.csv("crimea.csv", function(crimea) {
// Add a label per date. // Add a label per date.
var label = svg.selectAll("text") var label = svg.selectAll("text")
.data(x.domain()) .data(x.domain())
.enter().append("svg:text") .enter().append("text")
.attr("x", function(d) { return x(d) + x.rangeBand() / 2; }) .attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
.attr("y", 6) .attr("y", 6)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
@ -78,16 +78,16 @@ d3.csv("crimea.csv", function(crimea) {
// Add y-axis rules. // Add y-axis rules.
var rule = svg.selectAll("g.rule") var rule = svg.selectAll("g.rule")
.data(y.ticks(5)) .data(y.ticks(5))
.enter().append("svg:g") .enter().append("g")
.attr("class", "rule") .attr("class", "rule")
.attr("transform", function(d) { return "translate(0," + -y(d) + ")"; }); .attr("transform", function(d) { return "translate(0," + -y(d) + ")"; });
rule.append("svg:line") rule.append("line")
.attr("x2", w) .attr("x2", w)
.style("stroke", function(d) { return d ? "#fff" : "#000"; }) .style("stroke", function(d) { return d ? "#fff" : "#000"; })
.style("stroke-opacity", function(d) { return d ? .7 : null; }); .style("stroke-opacity", function(d) { return d ? .7 : null; });
rule.append("svg:text") rule.append("text")
.attr("x", w + 6) .attr("x", w + 6)
.attr("dy", ".35em") .attr("dy", ".35em")
.text(d3.format(",d")); .text(d3.format(",d"));

6
examples/delaunay/delaunay.html
Просмотреть файл

@ -27,15 +27,15 @@ var vertices = d3.range(500).map(function(d) {
}); });
var svg = d3.select("body") var svg = d3.select("body")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.attr("class", "PiYG"); .attr("class", "PiYG");
svg.append("svg:g") svg.append("g")
.selectAll("path") .selectAll("path")
.data(d3.geom.delaunay(vertices)) .data(d3.geom.delaunay(vertices))
.enter().append("svg:path") .enter().append("path")
.attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }) .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }); .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

6
examples/donut/donut.html
Просмотреть файл

@ -29,16 +29,16 @@ var w = 400,
donut = d3.layout.pie().sort(null); donut = d3.layout.pie().sort(null);
var vis = d3.select("body") var vis = d3.select("body")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
vis.selectAll("g.arc") vis.selectAll("g.arc")
.data(arcs(data0, data1)) .data(arcs(data0, data1))
.enter().append("svg:g") .enter().append("g")
.attr("class", "arc") .attr("class", "arc")
.attr("transform", "translate(" + r1 + "," + r1 + ")") .attr("transform", "translate(" + r1 + "," + r1 + ")")
.append("svg:path") .append("path")
.attr("fill", function(d, i) { return color(i); }) .attr("fill", function(d, i) { return color(i); })
.attr("d", arc); .attr("d", arc);

20
examples/dot/dot.html
Просмотреть файл

@ -43,24 +43,24 @@ var w = 450,
color = d3.scale.category10(); color = d3.scale.category10();
var vis = d3.select("body") var vis = d3.select("body")
.append("svg:svg") .append("svg")
.attr("width", w + p * 2) .attr("width", w + p * 2)
.attr("height", h + p * 2) .attr("height", h + p * 2)
.append("svg:g") .append("g")
.attr("transform", "translate(" + p + "," + p + ")"); .attr("transform", "translate(" + p + "," + p + ")");
var xrule = vis.selectAll("g.x") var xrule = vis.selectAll("g.x")
.data(x.ticks(10)) .data(x.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "x"); .attr("class", "x");
xrule.append("svg:line") xrule.append("line")
.attr("x1", x) .attr("x1", x)
.attr("x2", x) .attr("x2", x)
.attr("y1", 0) .attr("y1", 0)
.attr("y2", h); .attr("y2", h);
xrule.append("svg:text") xrule.append("text")
.attr("x", x) .attr("x", x)
.attr("y", h + 3) .attr("y", h + 3)
.attr("dy", ".71em") .attr("dy", ".71em")
@ -69,29 +69,29 @@ xrule.append("svg:text")
var yrule = vis.selectAll("g.y") var yrule = vis.selectAll("g.y")
.data(y.ticks(10)) .data(y.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "y"); .attr("class", "y");
yrule.append("svg:line") yrule.append("line")
.attr("x1", 0) .attr("x1", 0)
.attr("x2", w) .attr("x2", w)
.attr("y1", y) .attr("y1", y)
.attr("y2", y); .attr("y2", y);
yrule.append("svg:text") yrule.append("text")
.attr("x", -3) .attr("x", -3)
.attr("y", y) .attr("y", y)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", "end") .attr("text-anchor", "end")
.text(y.tickFormat(10)); .text(y.tickFormat(10));
vis.append("svg:rect") vis.append("rect")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
vis.selectAll("path.dot") vis.selectAll("path.dot")
.data(data) .data(data)
.enter().append("svg:path") .enter().append("path")
.attr("class", "dot") .attr("class", "dot")
.attr("stroke", function(d, i) { return color(i); }) .attr("stroke", function(d, i) { return color(i); })
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }) .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })

4
examples/drag/drag.html
Просмотреть файл

@ -22,11 +22,11 @@ var drag = d3.behavior.drag()
.origin(Object) .origin(Object)
.on("drag", dragmove); .on("drag", dragmove);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
var circle = svg.append("svg:circle") var circle = svg.append("circle")
.data([{x: w / 2, y: h / 2}]) .data([{x: w / 2, y: h / 2}])
.attr("r", r) .attr("r", r)
.attr("cx", function(d) { return d.x; }) .attr("cx", function(d) { return d.x; })

6
examples/force/force-bounds.html
Просмотреть файл

@ -31,18 +31,18 @@ var force = d3.layout.force()
.linkDistance(30) .linkDistance(30)
.size([w, h]); .size([w, h]);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
d3.json("miserables.json", function(json) { d3.json("miserables.json", function(json) {
var link = svg.selectAll("line") var link = svg.selectAll("line")
.data(json.links) .data(json.links)
.enter().append("svg:line"); .enter().append("line");
var node = svg.selectAll("circle") var node = svg.selectAll("circle")
.data(json.nodes) .data(json.nodes)
.enter().append("svg:circle") .enter().append("circle")
.attr("r", r - .75) .attr("r", r - .75)
.style("fill", function(d) { return fill(d.group); }) .style("fill", function(d) { return fill(d.group); })
.style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); }) .style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); })

14
examples/force/force-cluster.html
Просмотреть файл

@ -159,7 +159,7 @@ function drawCluster(d) {
var body = d3.select("body"); var body = d3.select("body");
var vis = body.append("svg:svg") var vis = body.append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
@ -171,9 +171,9 @@ d3.json("miserables.json", function(json) {
o.target = data.nodes[o.target]; o.target = data.nodes[o.target];
} }
hullg = vis.append("svg:g"); hullg = vis.append("g");
linkg = vis.append("svg:g"); linkg = vis.append("g");
nodeg = vis.append("svg:g"); nodeg = vis.append("g");
init(); init();
@ -198,7 +198,7 @@ function init() {
hullg.selectAll("path.hull").remove(); hullg.selectAll("path.hull").remove();
hull = hullg.selectAll("path.hull") hull = hullg.selectAll("path.hull")
.data(convexHulls(net.nodes, getGroup, off)) .data(convexHulls(net.nodes, getGroup, off))
.enter().append("svg:path") .enter().append("path")
.attr("class", "hull") .attr("class", "hull")
.attr("d", drawCluster) .attr("d", drawCluster)
.style("fill", function(d) { return fill(d.group); }) .style("fill", function(d) { return fill(d.group); })
@ -206,7 +206,7 @@ function init() {
link = linkg.selectAll("line.link").data(net.links, linkid); link = linkg.selectAll("line.link").data(net.links, linkid);
link.exit().remove(); link.exit().remove();
link.enter().append("svg:line") link.enter().append("line")
.attr("class", "link") .attr("class", "link")
.attr("x1", function(d) { return d.source.x; }) .attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; }) .attr("y1", function(d) { return d.source.y; })
@ -216,7 +216,7 @@ function init() {
node = nodeg.selectAll("circle.node").data(net.nodes, nodeid); node = nodeg.selectAll("circle.node").data(net.nodes, nodeid);
node.exit().remove(); node.exit().remove();
node.enter().append("svg:circle") node.enter().append("circle")
.attr("class", function(d) { return "node" + (d.size?"":" leaf"); }) .attr("class", function(d) { return "node" + (d.size?"":" leaf"); })
.attr("r", function(d) { return d.size ? d.size + dr : dr+1; }) .attr("r", function(d) { return d.size ? d.size + dr : dr+1; })
.attr("cx", function(d) { return d.x; }) .attr("cx", function(d) { return d.x; })

6
examples/force/force-collapsible.html
Просмотреть файл

@ -38,7 +38,7 @@ var force = d3.layout.force()
.linkDistance(function(d) { return d.target._children ? 80 : 30; }) .linkDistance(function(d) { return d.target._children ? 80 : 30; })
.size([w, h]); .size([w, h]);
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
@ -65,7 +65,7 @@ function update() {
.data(links, function(d) { return d.target.id; }); .data(links, function(d) { return d.target.id; });
// Enter any new links. // Enter any new links.
link.enter().insert("svg:line", ".node") link.enter().insert("line", ".node")
.attr("class", "link") .attr("class", "link")
.attr("x1", function(d) { return d.source.x; }) .attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; }) .attr("y1", function(d) { return d.source.y; })
@ -84,7 +84,7 @@ function update() {
.attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; }); .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; });
// Enter any new nodes. // Enter any new nodes.
node.enter().append("svg:circle") node.enter().append("circle")
.attr("class", "node") .attr("class", "node")
.attr("cx", function(d) { return d.x; }) .attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; }) .attr("cy", function(d) { return d.y; })

10
examples/force/force-dynamic.html
Просмотреть файл

@ -37,11 +37,11 @@ var w = 960,
nodes = [], nodes = [],
links = []; links = [];
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
vis.append("svg:rect") vis.append("rect")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
@ -51,7 +51,7 @@ var force = d3.layout.force()
.links(links) .links(links)
.size([w, h]); .size([w, h]);
var cursor = vis.append("svg:circle") var cursor = vis.append("circle")
.attr("r", 30) .attr("r", 30)
.attr("transform", "translate(-100,-100)") .attr("transform", "translate(-100,-100)")
.attr("class", "cursor"); .attr("class", "cursor");
@ -96,7 +96,7 @@ function restart() {
vis.selectAll("line.link") vis.selectAll("line.link")
.data(links) .data(links)
.enter().insert("svg:line", "circle.node") .enter().insert("line", "circle.node")
.attr("class", "link") .attr("class", "link")
.attr("x1", function(d) { return d.source.x; }) .attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; }) .attr("y1", function(d) { return d.source.y; })
@ -105,7 +105,7 @@ function restart() {
vis.selectAll("circle.node") vis.selectAll("circle.node")
.data(nodes) .data(nodes)
.enter().insert("svg:circle", "circle.cursor") .enter().insert("circle", "circle.cursor")
.attr("class", "node") .attr("class", "node")
.attr("cx", function(d) { return d.x; }) .attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; }) .attr("cy", function(d) { return d.y; })

8
examples/force/force-map.html
Просмотреть файл

@ -30,7 +30,7 @@ var w = 960,
var path = d3.geo.path(), var path = d3.geo.path(),
force = d3.layout.force().size([w, h]); force = d3.layout.force().size([w, h]);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
@ -63,7 +63,7 @@ d3.json("../data/us-states.json", function(states) {
var link = svg.selectAll("line") var link = svg.selectAll("line")
.data(links) .data(links)
.enter().append("svg:line") .enter().append("line")
.attr("x1", function(d) { return d.source.x; }) .attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; }) .attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; }) .attr("x2", function(d) { return d.target.x; })
@ -71,10 +71,10 @@ d3.json("../data/us-states.json", function(states) {
var node = svg.selectAll("g") var node = svg.selectAll("g")
.data(nodes) .data(nodes)
.enter().append("svg:g") .enter().append("g")
.attr("transform", function(d) { return "translate(" + -d.x + "," + -d.y + ")"; }) .attr("transform", function(d) { return "translate(" + -d.x + "," + -d.y + ")"; })
.call(force.drag) .call(force.drag)
.append("svg:path") .append("path")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("d", function(d) { return path(d.feature); }); .attr("d", function(d) { return path(d.feature); });

4
examples/force/force-multi-foci.html
Просмотреть файл

@ -15,7 +15,7 @@ var w = 960,
fill = d3.scale.category10(), fill = d3.scale.category10(),
nodes = d3.range(100).map(Object); nodes = d3.range(100).map(Object);
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
@ -27,7 +27,7 @@ var force = d3.layout.force()
var node = vis.selectAll("circle.node") var node = vis.selectAll("circle.node")
.data(nodes) .data(nodes)
.enter().append("svg:circle") .enter().append("circle")
.attr("class", "node") .attr("class", "node")
.attr("cx", function(d) { return d.x; }) .attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; }) .attr("cy", function(d) { return d.y; })

8
examples/force/force.js
Просмотреть файл

@ -2,7 +2,7 @@ var w = 960,
h = 500, h = 500,
fill = d3.scale.category20(); fill = d3.scale.category20();
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
@ -17,7 +17,7 @@ d3.json("miserables.json", function(json) {
var link = vis.selectAll("line.link") var link = vis.selectAll("line.link")
.data(json.links) .data(json.links)
.enter().append("svg:line") .enter().append("line")
.attr("class", "link") .attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); }) .style("stroke-width", function(d) { return Math.sqrt(d.value); })
.attr("x1", function(d) { return d.source.x; }) .attr("x1", function(d) { return d.source.x; })
@ -27,7 +27,7 @@ d3.json("miserables.json", function(json) {
var node = vis.selectAll("circle.node") var node = vis.selectAll("circle.node")
.data(json.nodes) .data(json.nodes)
.enter().append("svg:circle") .enter().append("circle")
.attr("class", "node") .attr("class", "node")
.attr("cx", function(d) { return d.x; }) .attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; }) .attr("cy", function(d) { return d.y; })
@ -35,7 +35,7 @@ d3.json("miserables.json", function(json) {
.style("fill", function(d) { return fill(d.group); }) .style("fill", function(d) { return fill(d.group); })
.call(force.drag); .call(force.drag);
node.append("svg:title") node.append("title")
.text(function(d) { return d.name; }); .text(function(d) { return d.name; });
force.on("tick", function() { force.on("tick", function() {

10
examples/great-arc/great-arc.html
Просмотреть файл

@ -35,20 +35,20 @@ var path = d3.geo.path()
var arc = d3.geo.greatArc(); var arc = d3.geo.greatArc();
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
var states = svg.append("svg:g") var states = svg.append("g")
.attr("id", "states"); .attr("id", "states");
var arcs = svg.append("svg:g") var arcs = svg.append("g")
.attr("id", "arcs"); .attr("id", "arcs");
d3.json("../data/us-states.json", function(collection) { d3.json("../data/us-states.json", function(collection) {
states.selectAll("path") states.selectAll("path")
.data(collection.features) .data(collection.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", path); .attr("d", path);
}); });
@ -69,7 +69,7 @@ d3.json("../data/us-state-centroids.json", function(collection) {
arcs.selectAll("path") arcs.selectAll("path")
.data(links) .data(links)
.enter().append("svg:path") .enter().append("path")
.attr("d", function(d) { return path(arc(d)); }); .attr("d", function(d) { return path(arc(d)); });
}); });

4
examples/hello-world/hello-data-key.html
Просмотреть файл

@ -26,10 +26,10 @@ function transform() {
t.enter().append("span") t.enter().append("span")
.attr("id", function(d) { return "span-" + d.id; }) .attr("id", function(d) { return "span-" + d.id; })
.append("svg:svg") .append("svg")
.attr("width", 100) .attr("width", 100)
.attr("height", 100) .attr("height", 100)
.append("svg:text") .append("text")
.attr("x", "50%") .attr("x", "50%")
.attr("y", "50%") .attr("y", "50%")
.attr("dy", ".35em") .attr("dy", ".35em")

4
examples/hello-world/hello-data.html
Просмотреть файл

@ -17,10 +17,10 @@ var data = [4, 8, 15, 16, 23, 42];
d3.selectAll("span") d3.selectAll("span")
.data(data) .data(data)
.append("svg:svg") .append("svg")
.attr("width", 100) .attr("width", 100)
.attr("height", 100) .attr("height", 100)
.append("svg:text") .append("text")
.attr("x", "50%") .attr("x", "50%")
.attr("y", "50%") .attr("y", "50%")
.attr("dy", ".35em") .attr("dy", ".35em")

4
examples/hello-world/hello-event.html
Просмотреть файл

@ -14,10 +14,10 @@ var data = [4, 8, 15, 16, 23, 42];
d3.select("span") d3.select("span")
.selectAll("svg") .selectAll("svg")
.data(data) .data(data)
.enter().append("svg:svg") .enter().append("svg")
.attr("width", 100) .attr("width", 100)
.attr("height", 100) .attr("height", 100)
.append("svg:text") .append("text")
.attr("x", "50%") .attr("x", "50%")
.attr("y", "50%") .attr("y", "50%")
.attr("dy", ".35em") .attr("dy", ".35em")

4
examples/hello-world/hello-sort.html
Просмотреть файл

@ -35,7 +35,7 @@ div {
<script type="text/javascript"> <script type="text/javascript">
d3.select("body") d3.select("body")
.append("svg:svg") .append("svg")
.attr("viewBox", "0 0 1000 1000"); .attr("viewBox", "0 0 1000 1000");
d3.select("#sort") d3.select("#sort")
@ -48,7 +48,7 @@ function transform() {
.selectAll("circle") .selectAll("circle")
.data(d3.range(400).map(Math.random)); .data(d3.range(400).map(Math.random));
circle.enter().append("svg:circle") circle.enter().append("circle")
.attr("cx", function() { return 100 + Math.random() * 800; }) .attr("cx", function() { return 100 + Math.random() * 800; })
.attr("cy", function() { return 100 + Math.random() * 800; }) .attr("cy", function() { return 100 + Math.random() * 800; })
.attr("r", function(d) { return 50 * d; }); .attr("r", function(d) { return 50 * d; });

4
examples/hello-world/hello-transform.html
Просмотреть файл

@ -14,10 +14,10 @@
<script type="text/javascript"> <script type="text/javascript">
d3.selectAll("span") d3.selectAll("span")
.append("svg:svg") .append("svg")
.attr("width", 100) .attr("width", 100)
.attr("height", 100) .attr("height", 100)
.append("svg:text") .append("text")
.attr("x", "50%") .attr("x", "50%")
.attr("y", "50%") .attr("y", "50%")
.attr("dy", ".35em") .attr("dy", ".35em")

8
examples/histogram/histogram.html
Просмотреть файл

@ -51,15 +51,15 @@ var y = d3.scale.linear()
.domain([0, d3.max(histogram, function(d) { return d.y; })]) .domain([0, d3.max(histogram, function(d) { return d.y; })])
.range([0, h]); .range([0, h]);
var vis = d3.select("body").append("svg:svg") var vis = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(.5)"); .attr("transform", "translate(.5)");
vis.selectAll("rect") vis.selectAll("rect")
.data(histogram) .data(histogram)
.enter().append("svg:rect") .enter().append("rect")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")"; }) .attr("transform", function(d) { return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")"; })
.attr("width", x.rangeBand()) .attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y); }) .attr("y", function(d) { return y(d.y); })
@ -69,7 +69,7 @@ vis.selectAll("rect")
.attr("y", 0) .attr("y", 0)
.attr("height", function(d) { return y(d.y); }); .attr("height", function(d) { return y(d.y); });
vis.append("svg:line") vis.append("line")
.attr("x1", 0) .attr("x1", 0)
.attr("x2", w) .attr("x2", w)
.attr("y1", h) .attr("y1", h)

2
examples/horizon/horizon.js
Просмотреть файл

@ -8,7 +8,7 @@ var chart = d3.chart.horizon()
.mode("offset") .mode("offset")
.interpolate("basis"); .interpolate("basis");
var svg = d3.select("#chart").append("svg:svg") var svg = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);

6
examples/hull/hull.html
Просмотреть файл

@ -38,7 +38,7 @@ var vertices = d3.range(15).map(function(d) {
}); });
var svg = d3.select("body") var svg = d3.select("body")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.attr("pointer-events", "all") .attr("pointer-events", "all")
@ -51,12 +51,12 @@ function update() {
svg.selectAll("path") svg.selectAll("path")
.data([d3.geom.hull(vertices)]) .data([d3.geom.hull(vertices)])
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }) .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.enter().append("svg:path") .enter().append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }); .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
svg.selectAll("circle") svg.selectAll("circle")
.data(vertices.slice(1)) .data(vertices.slice(1))
.enter().append("svg:circle") .enter().append("circle")
.attr("transform", function(d) { return "translate(" + d + ")"; }) .attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 3); .attr("r", 3);
} }

8
examples/kde/kde.js
Просмотреть файл

@ -10,19 +10,19 @@ d3.json("../data/faithful.json", function(faithful) {
kde = science.stats.kde().sample(data); kde = science.stats.kde().sample(data);
var vis = d3.select("body") var vis = d3.select("body")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
var bars = vis.selectAll("g.bar") var bars = vis.selectAll("g.bar")
.data(bins) .data(bins)
.enter().append("svg:g") .enter().append("g")
.attr("class", "bar") .attr("class", "bar")
.attr("transform", function(d, i) { .attr("transform", function(d, i) {
return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")"; return "translate(" + x(d.x) + "," + (h - y(d.y)) + ")";
}); });
bars.append("svg:rect") bars.append("rect")
.attr("fill", "steelblue") .attr("fill", "steelblue")
.attr("width", function(d) { return x(d.dx + 30) - 1; }) .attr("width", function(d) { return x(d.dx + 30) - 1; })
.attr("height", function(d) { return y(d.y); }); .attr("height", function(d) { return y(d.y); });
@ -33,7 +33,7 @@ d3.json("../data/faithful.json", function(faithful) {
vis.selectAll("path") vis.selectAll("path")
.data(d3.values(science.stats.bandwidth)) .data(d3.values(science.stats.bandwidth))
.enter().append("svg:path") .enter().append("path")
.attr("d", function(h) { .attr("d", function(h) {
return line(kde.bandwidth(h)(d3.range(30, 110, .1))); return line(kde.bandwidth(h)(d3.range(30, 110, .1)));
}); });

18
examples/line/line.js
Просмотреть файл

@ -10,45 +10,45 @@ var w = 450,
var vis = d3.select("body") var vis = d3.select("body")
.data([data]) .data([data])
.append("svg:svg") .append("svg")
.attr("width", w + p * 2) .attr("width", w + p * 2)
.attr("height", h + p * 2) .attr("height", h + p * 2)
.append("svg:g") .append("g")
.attr("transform", "translate(" + p + "," + p + ")"); .attr("transform", "translate(" + p + "," + p + ")");
var rules = vis.selectAll("g.rule") var rules = vis.selectAll("g.rule")
.data(x.ticks(10)) .data(x.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "rule"); .attr("class", "rule");
rules.append("svg:line") rules.append("line")
.attr("x1", x) .attr("x1", x)
.attr("x2", x) .attr("x2", x)
.attr("y1", 0) .attr("y1", 0)
.attr("y2", h - 1); .attr("y2", h - 1);
rules.append("svg:line") rules.append("line")
.attr("class", function(d) { return d ? null : "axis"; }) .attr("class", function(d) { return d ? null : "axis"; })
.attr("y1", y) .attr("y1", y)
.attr("y2", y) .attr("y2", y)
.attr("x1", 0) .attr("x1", 0)
.attr("x2", w + 1); .attr("x2", w + 1);
rules.append("svg:text") rules.append("text")
.attr("x", x) .attr("x", x)
.attr("y", h + 3) .attr("y", h + 3)
.attr("dy", ".71em") .attr("dy", ".71em")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.text(x.tickFormat(10)); .text(x.tickFormat(10));
rules.append("svg:text") rules.append("text")
.attr("y", y) .attr("y", y)
.attr("x", -3) .attr("x", -3)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", "end") .attr("text-anchor", "end")
.text(y.tickFormat(10)); .text(y.tickFormat(10));
vis.append("svg:path") vis.append("path")
.attr("class", "line") .attr("class", "line")
.attr("d", d3.svg.line() .attr("d", d3.svg.line()
.x(function(d) { return x(d.x); }) .x(function(d) { return x(d.x); })
@ -56,7 +56,7 @@ vis.append("svg:path")
vis.selectAll("circle.line") vis.selectAll("circle.line")
.data(data) .data(data)
.enter().append("svg:circle") .enter().append("circle")
.attr("class", "line") .attr("class", "line")
.attr("cx", function(d) { return x(d.x); }) .attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); }) .attr("cy", function(d) { return y(d.y); })

22
examples/marimekko/marimekko.html
Просмотреть файл

@ -32,10 +32,10 @@ var w = 960,
n = d3.format(",d"), n = d3.format(",d"),
p = d3.format("%"); p = d3.format("%");
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(" + 2 * m + "," + m + ")"); .attr("transform", "translate(" + 2 * m + "," + m + ")");
d3.json("marimekko.json", function(data) { d3.json("marimekko.json", function(data) {
@ -59,15 +59,15 @@ d3.json("marimekko.json", function(data) {
// Add x-axis ticks. // Add x-axis ticks.
var xtick = svg.selectAll(".x") var xtick = svg.selectAll(".x")
.data(x.ticks(10)) .data(x.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "x") .attr("class", "x")
.attr("transform", function(d) { return "translate(" + x(d) + "," + y(1) + ")"; }); .attr("transform", function(d) { return "translate(" + x(d) + "," + y(1) + ")"; });
xtick.append("svg:line") xtick.append("line")
.attr("y2", 6) .attr("y2", 6)
.style("stroke", "#000"); .style("stroke", "#000");
xtick.append("svg:text") xtick.append("text")
.attr("y", 8) .attr("y", 8)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("dy", ".71em") .attr("dy", ".71em")
@ -76,15 +76,15 @@ d3.json("marimekko.json", function(data) {
// Add y-axis ticks. // Add y-axis ticks.
var ytick = svg.selectAll(".y") var ytick = svg.selectAll(".y")
.data(y.ticks(10)) .data(y.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "y") .attr("class", "y")
.attr("transform", function(d) { return "translate(0," + y(1 - d) + ")"; }); .attr("transform", function(d) { return "translate(0," + y(1 - d) + ")"; });
ytick.append("svg:line") ytick.append("line")
.attr("x1", -6) .attr("x1", -6)
.style("stroke", "#000"); .style("stroke", "#000");
ytick.append("svg:text") ytick.append("text")
.attr("x", -8) .attr("x", -8)
.attr("text-anchor", "end") .attr("text-anchor", "end")
.attr("dy", ".35em") .attr("dy", ".35em")
@ -93,7 +93,7 @@ d3.json("marimekko.json", function(data) {
// Add a group for each segment. // Add a group for each segment.
var segments = svg.selectAll(".segment") var segments = svg.selectAll(".segment")
.data(segments) .data(segments)
.enter().append("svg:g") .enter().append("g")
.attr("class", "segment") .attr("class", "segment")
.attr("xlink:title", function(d) { return d.key; }) .attr("xlink:title", function(d) { return d.key; })
.attr("transform", function(d) { return "translate(" + x(d.offset / sum) + ")"; }); .attr("transform", function(d) { return "translate(" + x(d.offset / sum) + ")"; });
@ -101,10 +101,10 @@ d3.json("marimekko.json", function(data) {
// Add a rect for each market. // Add a rect for each market.
var markets = segments.selectAll(".market") var markets = segments.selectAll(".market")
.data(function(d) { return d.values; }) .data(function(d) { return d.values; })
.enter().append("svg:a") .enter().append("a")
.attr("class", "market") .attr("class", "market")
.attr("xlink:title", function(d) { return d.market + " " + d.parent.key + ": " + n(d.value); }) .attr("xlink:title", function(d) { return d.market + " " + d.parent.key + ": " + n(d.value); })
.append("svg:rect") .append("rect")
.attr("y", function(d) { return y(d.offset / d.parent.sum); }) .attr("y", function(d) { return y(d.offset / d.parent.sum); })
.attr("height", function(d) { return y(d.value / d.parent.sum); }) .attr("height", function(d) { return y(d.value / d.parent.sum); })
.attr("width", function(d) { return x(d.parent.sum / sum); }) .attr("width", function(d) { return x(d.parent.sum / sum); })

24
examples/marker/marker.html
Просмотреть файл

@ -100,14 +100,14 @@ var force = d3.layout.force()
.on("tick", tick) .on("tick", tick)
.start(); .start();
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
// Per-type markers, as they don't inherit styles. // Per-type markers, as they don't inherit styles.
svg.append("svg:defs").selectAll("marker") svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"]) .data(["suit", "licensing", "resolved"])
.enter().append("svg:marker") .enter().append("marker")
.attr("id", String) .attr("id", String)
.attr("viewBox", "0 -5 10 10") .attr("viewBox", "0 -5 10 10")
.attr("refX", 15) .attr("refX", 15)
@ -115,33 +115,33 @@ svg.append("svg:defs").selectAll("marker")
.attr("markerWidth", 6) .attr("markerWidth", 6)
.attr("markerHeight", 6) .attr("markerHeight", 6)
.attr("orient", "auto") .attr("orient", "auto")
.append("svg:path") .append("path")
.attr("d", "M0,-5L10,0L0,5"); .attr("d", "M0,-5L10,0L0,5");
var path = svg.append("svg:g").selectAll("path") var path = svg.append("g").selectAll("path")
.data(force.links()) .data(force.links())
.enter().append("svg:path") .enter().append("path")
.attr("class", function(d) { return "link " + d.type; }) .attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
var circle = svg.append("svg:g").selectAll("circle") var circle = svg.append("g").selectAll("circle")
.data(force.nodes()) .data(force.nodes())
.enter().append("svg:circle") .enter().append("circle")
.attr("r", 6) .attr("r", 6)
.call(force.drag); .call(force.drag);
var text = svg.append("svg:g").selectAll("g") var text = svg.append("g").selectAll("g")
.data(force.nodes()) .data(force.nodes())
.enter().append("svg:g"); .enter().append("g");
// A copy of the text with a thick white stroke for legibility. // A copy of the text with a thick white stroke for legibility.
text.append("svg:text") text.append("text")
.attr("x", 8) .attr("x", 8)
.attr("y", ".31em") .attr("y", ".31em")
.attr("class", "shadow") .attr("class", "shadow")
.text(function(d) { return d.name; }); .text(function(d) { return d.name; });
text.append("svg:text") text.append("text")
.attr("x", 8) .attr("x", 8)
.attr("y", ".31em") .attr("y", ".31em")
.text(function(d) { return d.name; }); .text(function(d) { return d.name; });

10
examples/mercator/mercator.html
Просмотреть файл

@ -47,12 +47,12 @@ var xy = d3.geo.mercator(),
path = d3.geo.path().projection(xy); path = d3.geo.path().projection(xy);
var states = d3.select("body") var states = d3.select("body")
.append("svg:svg") .append("svg")
.append("svg:g") .append("g")
.attr("id", "states"); .attr("id", "states");
var equator = d3.select("svg") var equator = d3.select("svg")
.append("svg:line") .append("line")
.attr("x1", "0%") .attr("x1", "0%")
.attr("x2", "100%"); .attr("x2", "100%");
@ -61,9 +61,9 @@ d3.json("../data/world-countries.json", function(collection) {
states states
.selectAll("path") .selectAll("path")
.data(collection.features) .data(collection.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", path) .attr("d", path)
.append("svg:title") .append("title")
.text(function(d) { return d.properties.name; }); .text(function(d) { return d.properties.name; });
equator equator

10
examples/moire/moire.html
Просмотреть файл

@ -20,22 +20,22 @@ var w = 960,
h = 500; h = 500;
var svg = d3.select("body") var svg = d3.select("body")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.attr("pointer-events", "all"); .attr("pointer-events", "all");
svg.append("svg:g") svg.append("g")
.selectAll("circle") .selectAll("circle")
.data(d3.range(110)) .data(d3.range(110))
.enter().append("svg:circle") .enter().append("circle")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")") .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
.attr("r", function(d) { return d * 5; }); .attr("r", function(d) { return d * 5; });
var circle = svg.append("svg:g") var circle = svg.append("g")
.selectAll("circle") .selectAll("circle")
.data(d3.range(60)) .data(d3.range(60))
.enter().append("svg:circle") .enter().append("circle")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")") .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
.attr("r", function(d) { return d * 3; }); .attr("r", function(d) { return d * 3; });

12
examples/pack/pack.js
Просмотреть файл

@ -6,27 +6,27 @@ var pack = d3.layout.pack()
.size([w - 4, h - 4]) .size([w - 4, h - 4])
.value(function(d) { return d.size; }); .value(function(d) { return d.size; });
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.attr("class", "pack") .attr("class", "pack")
.append("svg:g") .append("g")
.attr("transform", "translate(2, 2)"); .attr("transform", "translate(2, 2)");
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
var node = vis.data([json]).selectAll("g.node") var node = vis.data([json]).selectAll("g.node")
.data(pack.nodes) .data(pack.nodes)
.enter().append("svg:g") .enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; }) .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("svg:title") node.append("title")
.text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); }); .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });
node.append("svg:circle") node.append("circle")
.attr("r", function(d) { return d.r; }); .attr("r", function(d) { return d.r; });
node.filter(function(d) { return !d.children; }).append("svg:text") node.filter(function(d) { return !d.children; }).append("text")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("dy", ".3em") .attr("dy", ".3em")
.text(function(d) { return d.name.substring(0, d.r / 3); }); .text(function(d) { return d.name.substring(0, d.r / 3); });

20
examples/parallel/parallel.html
Просмотреть файл

@ -57,10 +57,10 @@ var line = d3.svg.line(),
background, background,
foreground; foreground;
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.csv("cars.csv", function(cars) { d3.csv("cars.csv", function(cars) {
@ -73,39 +73,39 @@ d3.csv("cars.csv", function(cars) {
})); }));
// Add grey background lines for context. // Add grey background lines for context.
background = svg.append("svg:g") background = svg.append("g")
.attr("class", "background") .attr("class", "background")
.selectAll("path") .selectAll("path")
.data(cars) .data(cars)
.enter().append("svg:path") .enter().append("path")
.attr("d", path); .attr("d", path);
// Add blue foreground lines for focus. // Add blue foreground lines for focus.
foreground = svg.append("svg:g") foreground = svg.append("g")
.attr("class", "foreground") .attr("class", "foreground")
.selectAll("path") .selectAll("path")
.data(cars) .data(cars)
.enter().append("svg:path") .enter().append("path")
.attr("d", path); .attr("d", path);
// Add a group element for each dimension. // Add a group element for each dimension.
var g = svg.selectAll(".dimension") var g = svg.selectAll(".dimension")
.data(dimensions) .data(dimensions)
.enter().append("svg:g") .enter().append("g")
.attr("class", "dimension") .attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; }); .attr("transform", function(d) { return "translate(" + x(d) + ")"; });
// Add an axis and title. // Add an axis and title.
g.append("svg:g") g.append("g")
.attr("class", "axis") .attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); }) .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("svg:text") .append("text")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("y", -9) .attr("y", -9)
.text(String); .text(String);
// Add and store a brush for each axis. // Add and store a brush for each axis.
g.append("svg:g") g.append("g")
.attr("class", "brush") .attr("class", "brush")
.each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); }) .each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
.selectAll("rect") .selectAll("rect")

4
examples/partition/partition-icicle-zoom.html
Просмотреть файл

@ -23,7 +23,7 @@ var w = 960,
y = d3.scale.linear().range([0, h]), y = d3.scale.linear().range([0, h]),
color = d3.scale.category20c(); color = d3.scale.category20c();
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
@ -33,7 +33,7 @@ var partition = d3.layout.partition()
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
var rect = vis.data([json]).selectAll("rect") var rect = vis.data([json]).selectAll("rect")
.data(partition.nodes) .data(partition.nodes)
.enter().append("svg:rect") .enter().append("rect")
.attr("x", function(d) { return x(d.x); }) .attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); }) .attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.dx); }) .attr("width", function(d) { return x(d.dx); })

4
examples/partition/partition-icicle.html
Просмотреть файл

@ -21,7 +21,7 @@ var w = 960,
h = 250, h = 250,
color = d3.scale.category20c(); color = d3.scale.category20c();
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
@ -32,7 +32,7 @@ var partition = d3.layout.partition()
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
vis.data([json]).selectAll("rect") vis.data([json]).selectAll("rect")
.data(partition.nodes) .data(partition.nodes)
.enter().append("svg:rect") .enter().append("rect")
.attr("x", function(d) { return d.x; }) .attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; }) .attr("y", function(d) { return d.y; })
.attr("width", function(d) { return d.dx; }) .attr("width", function(d) { return d.dx; })

6
examples/partition/partition-sunburst-zoom.html
Просмотреть файл

@ -25,10 +25,10 @@ var w = 960,
y = d3.scale.sqrt().range([0, r]), y = d3.scale.sqrt().range([0, r]),
color = d3.scale.category20c(); color = d3.scale.category20c();
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")"); .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
var partition = d3.layout.partition() var partition = d3.layout.partition()
@ -43,7 +43,7 @@ var arc = d3.svg.arc()
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
var path = vis.data([json]).selectAll("path") var path = vis.data([json]).selectAll("path")
.data(partition.nodes) .data(partition.nodes)
.enter().append("svg:path") .enter().append("path")
.attr("d", arc) .attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); }) .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click); .on("click", click);

6
examples/partition/partition-sunburst.js
Просмотреть файл

@ -3,10 +3,10 @@ var w = 960,
r = Math.min(w, h) / 2, r = Math.min(w, h) / 2,
color = d3.scale.category20c(); color = d3.scale.category20c();
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")"); .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
var partition = d3.layout.partition() var partition = d3.layout.partition()
@ -23,7 +23,7 @@ var arc = d3.svg.arc()
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
var path = vis.data([json]).selectAll("path") var path = vis.data([json]).selectAll("path")
.data(partition.nodes) .data(partition.nodes)
.enter().append("svg:path") .enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc) .attr("d", arc)
.attr("fill-rule", "evenodd") .attr("fill-rule", "evenodd")

6
examples/pie/pie-transition.html
Просмотреть файл

@ -23,18 +23,18 @@ var w = 400,
arc = d3.svg.arc().outerRadius(r), arc = d3.svg.arc().outerRadius(r),
donut = d3.layout.pie(); donut = d3.layout.pie();
var vis = d3.select("body").append("svg:svg") var vis = d3.select("body").append("svg")
.data([data]) .data([data])
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
var arcs = vis.selectAll("g.arc") var arcs = vis.selectAll("g.arc")
.data(donut) .data(donut)
.enter().append("svg:g") .enter().append("g")
.attr("class", "arc") .attr("class", "arc")
.attr("transform", "translate(" + r + "," + r + ")"); .attr("transform", "translate(" + r + "," + r + ")");
var paths = arcs.append("svg:path") var paths = arcs.append("path")
.attr("fill", function(d, i) { return color(i); }); .attr("fill", function(d, i) { return color(i); });
paths.transition() paths.transition()

8
examples/pie/pie.html
Просмотреть файл

@ -24,22 +24,22 @@ var w = 400,
arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r); arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r);
var vis = d3.select("body") var vis = d3.select("body")
.append("svg:svg") .append("svg")
.data([data]) .data([data])
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
var arcs = vis.selectAll("g.arc") var arcs = vis.selectAll("g.arc")
.data(donut) .data(donut)
.enter().append("svg:g") .enter().append("g")
.attr("class", "arc") .attr("class", "arc")
.attr("transform", "translate(" + r + "," + r + ")"); .attr("transform", "translate(" + r + "," + r + ")");
arcs.append("svg:path") arcs.append("path")
.attr("fill", function(d, i) { return color(i); }) .attr("fill", function(d, i) { return color(i); })
.attr("d", arc); .attr("d", arc);
arcs.append("svg:text") arcs.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")

26
examples/population/population.js
Просмотреть файл

@ -4,22 +4,22 @@ var w = 960,
y = d3.scale.linear().range([0, h - 40]); y = d3.scale.linear().range([0, h - 40]);
// An SVG element with a bottom-right origin. // An SVG element with a bottom-right origin.
var svg = d3.select("#chart").append("svg:svg") var svg = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.style("padding-right", "30px") .style("padding-right", "30px")
.append("svg:g") .append("g")
.attr("transform", "translate(" + x(1) + "," + (h - 20) + ")scale(-1,-1)"); .attr("transform", "translate(" + x(1) + "," + (h - 20) + ")scale(-1,-1)");
// A sliding container to hold the bars. // A sliding container to hold the bars.
var body = svg.append("svg:g") var body = svg.append("g")
.attr("transform", "translate(0,0)"); .attr("transform", "translate(0,0)");
// A container to hold the y-axis rules. // A container to hold the y-axis rules.
var rules = svg.append("svg:g"); var rules = svg.append("g");
// A label for the current year. // A label for the current year.
var title = svg.append("svg:text") var title = svg.append("text")
.attr("class", "title") .attr("class", "title")
.attr("dy", ".71em") .attr("dy", ".71em")
.attr("transform", "translate(" + x(1) + "," + y(1) + ")scale(-1,-1)") .attr("transform", "translate(" + x(1) + "," + y(1) + ")scale(-1,-1)")
@ -48,14 +48,14 @@ d3.csv("population.csv", function(data) {
// Add rules to show the population values. // Add rules to show the population values.
rules = rules.selectAll(".rule") rules = rules.selectAll(".rule")
.data(y.ticks(10)) .data(y.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "rule") .attr("class", "rule")
.attr("transform", function(d) { return "translate(0," + y(d) + ")"; }); .attr("transform", function(d) { return "translate(0," + y(d) + ")"; });
rules.append("svg:line") rules.append("line")
.attr("x2", w); .attr("x2", w);
rules.append("svg:text") rules.append("text")
.attr("x", 6) .attr("x", 6)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("transform", "rotate(180)") .attr("transform", "rotate(180)")
@ -64,17 +64,17 @@ d3.csv("population.csv", function(data) {
// Add labeled rects for each birthyear. // Add labeled rects for each birthyear.
var years = body.selectAll("g") var years = body.selectAll("g")
.data(d3.range(year0 - age1, year1 + 5, 5)) .data(d3.range(year0 - age1, year1 + 5, 5))
.enter().append("svg:g") .enter().append("g")
.attr("transform", function(d) { return "translate(" + x(year1 - d) + ",0)"; }); .attr("transform", function(d) { return "translate(" + x(year1 - d) + ",0)"; });
years.selectAll("rect") years.selectAll("rect")
.data(d3.range(2)) .data(d3.range(2))
.enter().append("svg:rect") .enter().append("rect")
.attr("x", 1) .attr("x", 1)
.attr("width", x(5) - 2) .attr("width", x(5) - 2)
.attr("height", 1e-6); .attr("height", 1e-6);
years.append("svg:text") years.append("text")
.attr("y", -6) .attr("y", -6)
.attr("x", -x(5) / 2) .attr("x", -x(5) / 2)
.attr("transform", "rotate(180)") .attr("transform", "rotate(180)")
@ -83,9 +83,9 @@ d3.csv("population.csv", function(data) {
.text(String); .text(String);
// Add labels to show the age. // Add labels to show the age.
svg.append("svg:g").selectAll("text") svg.append("g").selectAll("text")
.data(d3.range(0, age1 + 5, 5)) .data(d3.range(0, age1 + 5, 5))
.enter().append("svg:text") .enter().append("text")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("transform", function(d) { return "translate(" + (x(d) + x(5) / 2) + ",-4)scale(-1,-1)"; }) .attr("transform", function(d) { return "translate(" + (x(d) + x(5) / 2) + ",-4)scale(-1,-1)"; })
.attr("dy", ".71em") .attr("dy", ".71em")

10
examples/qq/qq.js
Просмотреть файл

@ -10,8 +10,8 @@ var chart = d3.chart.qq()
.tickFormat(function(d) { return ~~(d * 100); }); .tickFormat(function(d) { return ~~(d * 100); });
var vis = d3.select("#chart") var vis = d3.select("#chart")
.append("svg:svg") .append("svg")
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.json("turkers.json", function(turkers) { d3.json("turkers.json", function(turkers) {
@ -37,18 +37,18 @@ d3.json("turkers.json", function(turkers) {
y: turkers, y: turkers,
label: "Mixture of 3 Gaussians" label: "Mixture of 3 Gaussians"
}]) }])
.enter().append("svg:g") .enter().append("g")
.attr("class", "qq") .attr("class", "qq")
.attr("transform", function(d, i) { return "translate(" + (w + m[1] + m[3]) * i + ")"; }); .attr("transform", function(d, i) { return "translate(" + (w + m[1] + m[3]) * i + ")"; });
g.append("svg:rect") g.append("rect")
.attr("class", "box") .attr("class", "box")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
g.call(chart); g.call(chart);
g.append("svg:text") g.append("text")
.attr("dy", "1.3em") .attr("dy", "1.3em")
.attr("dx", ".6em") .attr("dx", ".6em")
.text(function(d) { return d.label; }); .text(function(d) { return d.label; });

8
examples/quadtree/quadtree.html
Просмотреть файл

@ -40,14 +40,14 @@ var data = d3.range(500).map(function() {
// Generate a quadtree of the specified data. // Generate a quadtree of the specified data.
var quadtree = d3.geom.quadtree(data, 0, w); var quadtree = d3.geom.quadtree(data, 0, w);
var vis = d3.select("body").append("svg:svg") var vis = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", w) .attr("height", w)
.style("pointer-events", "all"); .style("pointer-events", "all");
vis.selectAll("rect") vis.selectAll("rect")
.data(nodes(quadtree)) .data(nodes(quadtree))
.enter().append("svg:rect") .enter().append("rect")
.attr("x", function(d) { return d.x; }) .attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; }) .attr("y", function(d) { return d.y; })
.attr("width", function(d) { return d.width; }) .attr("width", function(d) { return d.width; })
@ -55,7 +55,7 @@ vis.selectAll("rect")
vis.selectAll("circle") vis.selectAll("circle")
.data(data) .data(data)
.enter().append("svg:circle") .enter().append("circle")
.attr("cx", function(d) { return d.x; }) .attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; }) .attr("cy", function(d) { return d.y; })
.attr("r", 4.5); .attr("r", 4.5);
@ -64,7 +64,7 @@ vis.selectAll("circle")
vis.on("mousedown", function() { vis.on("mousedown", function() {
var m0 = d3.svg.mouse(this); var m0 = d3.svg.mouse(this);
var rect = d3.select(this).append("svg:rect") var rect = d3.select(this).append("rect")
.style("fill", "#999") .style("fill", "#999")
.style("fill-opacity", .5); .style("fill-opacity", .5);

26
examples/showreel/showreel.html
Просмотреть файл

@ -38,10 +38,10 @@ var x = d3.time.scale().range([0, w - 60]),
var color = d3.scale.category10(); var color = d3.scale.category10();
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
var stocks, var stocks,
@ -96,7 +96,7 @@ d3.csv("../data/stocks.csv", function(data) {
var g = svg.selectAll("g") var g = svg.selectAll("g")
.data(symbols) .data(symbols)
.enter().append("svg:g") .enter().append("g")
.attr("class", "symbol"); .attr("class", "symbol");
setTimeout(lines, duration); setTimeout(lines, duration);
@ -110,16 +110,16 @@ function lines() {
g.each(function(d) { g.each(function(d) {
var e = d3.select(this); var e = d3.select(this);
e.append("svg:path") e.append("path")
.attr("class", "line"); .attr("class", "line");
e.append("svg:circle") e.append("circle")
.attr("r", 5) .attr("r", 5)
.style("fill", function(d) { return color(d.key); }) .style("fill", function(d) { return color(d.key); })
.style("stroke", "#000") .style("stroke", "#000")
.style("stroke-width", "2px"); .style("stroke-width", "2px");
e.append("svg:text") e.append("text")
.attr("x", 12) .attr("x", 12)
.attr("dy", ".31em") .attr("dy", ".31em")
.text(d.key); .text(d.key);
@ -151,10 +151,10 @@ function lines() {
} }
function horizons() { function horizons() {
svg.insert("svg:defs", ".symbol") svg.insert("defs", ".symbol")
.append("svg:clipPath") .append("clipPath")
.attr("id", "clip") .attr("id", "clip")
.append("svg:rect") .append("rect")
.attr("width", w) .attr("width", w)
.attr("height", h / 4 - 20); .attr("height", h / 4 - 20);
@ -179,7 +179,7 @@ function horizons() {
d3.select(this).selectAll(".area") d3.select(this).selectAll(".area")
.data(d3.range(3)) .data(d3.range(3))
.enter().insert("svg:path", ".line") .enter().insert("path", ".line")
.attr("class", "area") .attr("class", "area")
.attr("transform", function(d) { return "translate(0," + (d * (h / 4 - 20)) + ")"; }) .attr("transform", function(d) { return "translate(0," + (d * (h / 4 - 20)) + ")"; })
.attr("d", area(d.values)) .attr("d", area(d.values))
@ -351,7 +351,7 @@ function overlappingArea() {
.attr("dy", ".31em") .attr("dy", ".31em")
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price) + ")"; }); .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price) + ")"; });
svg.append("svg:line") svg.append("line")
.attr("class", "line") .attr("class", "line")
.attr("x1", 0) .attr("x1", 0)
.attr("x2", w - 60) .attr("x2", w - 60)
@ -390,7 +390,7 @@ function groupedBar() {
g.each(function(p, j) { g.each(function(p, j) {
d3.select(this).selectAll("rect") d3.select(this).selectAll("rect")
.data(function(d) { return d.values; }) .data(function(d) { return d.values; })
.enter().append("svg:rect") .enter().append("rect")
.attr("x", function(d) { return x(d.date) + x1(p.key); }) .attr("x", function(d) { return x(d.date) + x1(p.key); })
.attr("y", function(d) { return y(d.price); }) .attr("y", function(d) { return y(d.price); })
.attr("width", x1.rangeBand()) .attr("width", x1.rangeBand())
@ -499,7 +499,7 @@ function donut() {
var arc = d3.svg.arc(); var arc = d3.svg.arc();
g.append("svg:path") g.append("path")
.style("fill", function(d) { return color(d.key); }) .style("fill", function(d) { return color(d.key); })
.data(function() { return pie(symbols); }) .data(function() { return pie(symbols); })
.transition() .transition()

4
examples/sort/sort.js
Просмотреть файл

@ -9,13 +9,13 @@ var w = 960,
data = shuffle(d3.range(n)), data = shuffle(d3.range(n)),
duration = 250; duration = 250;
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
var line = vis.selectAll("line") var line = vis.selectAll("line")
.data(data) .data(data)
.enter().append("svg:line") .enter().append("line")
.attr("x1", 0) .attr("x1", 0)
.attr("y1", 0) .attr("y1", 0)
.attr("x2", 0) .attr("x2", 0)

8
examples/spline/spline.js
Просмотреть файл

@ -5,11 +5,11 @@ var w = 960,
dragged = null, dragged = null,
selected = points[0]; selected = points[0];
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
vis.append("svg:rect") vis.append("rect")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.on("mousedown", function() { .on("mousedown", function() {
@ -17,7 +17,7 @@ vis.append("svg:rect")
update(); update();
}); });
vis.append("svg:path") vis.append("path")
.data([points]) .data([points])
.attr("class", "line") .attr("class", "line")
.call(update); .call(update);
@ -56,7 +56,7 @@ function update() {
var circle = vis.selectAll("circle") var circle = vis.selectAll("circle")
.data(points, function(d) { return d; }); .data(points, function(d) { return d; });
circle.enter().append("svg:circle") circle.enter().append("circle")
.attr("class", function(d) { return d === selected ? "selected" : null; }) .attr("class", function(d) { return d === selected ? "selected" : null; })
.attr("cx", function(d) { return d[0]; }) .attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; }) .attr("cy", function(d) { return d[1]; })

14
examples/splom/splom.js
Просмотреть файл

@ -27,14 +27,14 @@ d3.json("flowers.json", function(flower) {
.on("brushend", brushend); .on("brushend", brushend);
// Root panel. // Root panel.
var svg = d3.select("#chart").append("svg:svg") var svg = d3.select("#chart").append("svg")
.attr("width", size * n + padding) .attr("width", size * n + padding)
.attr("height", size * n + padding); .attr("height", size * n + padding);
// X-axis. // X-axis.
svg.selectAll("g.x.axis") svg.selectAll("g.x.axis")
.data(flower.traits) .data(flower.traits)
.enter().append("svg:g") .enter().append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", function(d, i) { return "translate(" + i * size + ",0)"; }) .attr("transform", function(d, i) { return "translate(" + i * size + ",0)"; })
.each(function(d) { d3.select(this).call(axis.scale(x[d]).orient("bottom")); }); .each(function(d) { d3.select(this).call(axis.scale(x[d]).orient("bottom")); });
@ -42,7 +42,7 @@ d3.json("flowers.json", function(flower) {
// Y-axis. // Y-axis.
svg.selectAll("g.y.axis") svg.selectAll("g.y.axis")
.data(flower.traits) .data(flower.traits)
.enter().append("svg:g") .enter().append("g")
.attr("class", "y axis") .attr("class", "y axis")
.attr("transform", function(d, i) { return "translate(0," + i * size + ")"; }) .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
.each(function(d) { d3.select(this).call(axis.scale(y[d]).orient("right")); }); .each(function(d) { d3.select(this).call(axis.scale(y[d]).orient("right")); });
@ -50,13 +50,13 @@ d3.json("flowers.json", function(flower) {
// Cell and plot. // Cell and plot.
var cell = svg.selectAll("g.cell") var cell = svg.selectAll("g.cell")
.data(cross(flower.traits, flower.traits)) .data(cross(flower.traits, flower.traits))
.enter().append("svg:g") .enter().append("g")
.attr("class", "cell") .attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.i * size + "," + d.j * size + ")"; }) .attr("transform", function(d) { return "translate(" + d.i * size + "," + d.j * size + ")"; })
.each(plot); .each(plot);
// Titles for the diagonal. // Titles for the diagonal.
cell.filter(function(d) { return d.i == d.j; }).append("svg:text") cell.filter(function(d) { return d.i == d.j; }).append("text")
.attr("x", padding) .attr("x", padding)
.attr("y", padding) .attr("y", padding)
.attr("dy", ".71em") .attr("dy", ".71em")
@ -66,7 +66,7 @@ d3.json("flowers.json", function(flower) {
var cell = d3.select(this); var cell = d3.select(this);
// Plot frame. // Plot frame.
cell.append("svg:rect") cell.append("rect")
.attr("class", "frame") .attr("class", "frame")
.attr("x", padding / 2) .attr("x", padding / 2)
.attr("y", padding / 2) .attr("y", padding / 2)
@ -76,7 +76,7 @@ d3.json("flowers.json", function(flower) {
// Plot dots. // Plot dots.
cell.selectAll("circle") cell.selectAll("circle")
.data(flower.values) .data(flower.values)
.enter().append("svg:circle") .enter().append("circle")
.attr("class", function(d) { return d.species; }) .attr("class", function(d) { return d.species; })
.attr("cx", function(d) { return x[p.x](d[p.x]); }) .attr("cx", function(d) { return x[p.x](d[p.x]); })
.attr("cy", function(d) { return y[p.y](d[p.y]); }) .attr("cy", function(d) { return y[p.y](d[p.y]); })

12
examples/stream/stack.js
Просмотреть файл

@ -23,23 +23,23 @@ var p = 20,
y2 = function(d) { return d.y * h / mz; }; // or `my` to not rescale y2 = function(d) { return d.y * h / mz; }; // or `my` to not rescale
var vis = d3.select("#chart") var vis = d3.select("#chart")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h + p); .attr("height", h + p);
var layers = vis.selectAll("g.layer") var layers = vis.selectAll("g.layer")
.data(data) .data(data)
.enter().append("svg:g") .enter().append("g")
.style("fill", function(d, i) { return color(i / (n - 1)); }) .style("fill", function(d, i) { return color(i / (n - 1)); })
.attr("class", "layer"); .attr("class", "layer");
var bars = layers.selectAll("g.bar") var bars = layers.selectAll("g.bar")
.data(function(d) { return d; }) .data(function(d) { return d; })
.enter().append("svg:g") .enter().append("g")
.attr("class", "bar") .attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d) + ",0)"; }); .attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });
bars.append("svg:rect") bars.append("rect")
.attr("width", x({x: .9})) .attr("width", x({x: .9}))
.attr("x", 0) .attr("x", 0)
.attr("y", h) .attr("y", h)
@ -51,7 +51,7 @@ bars.append("svg:rect")
var labels = vis.selectAll("text.label") var labels = vis.selectAll("text.label")
.data(data[0]) .data(data[0])
.enter().append("svg:text") .enter().append("text")
.attr("class", "label") .attr("class", "label")
.attr("x", x) .attr("x", x)
.attr("y", h + 6) .attr("y", h + 6)
@ -60,7 +60,7 @@ var labels = vis.selectAll("text.label")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.text(function(d, i) { return i; }); .text(function(d, i) { return i; });
vis.append("svg:line") vis.append("line")
.attr("x1", 0) .attr("x1", 0)
.attr("x2", w - x({x: .1})) .attr("x2", w - x({x: .1}))
.attr("y1", h) .attr("y1", h)

4
examples/stream/stream.js
Просмотреть файл

@ -19,13 +19,13 @@ var area = d3.svg.area()
.y1(function(d) { return h - (d.y + d.y0) * h / my; }); .y1(function(d) { return h - (d.y + d.y0) * h / my; });
var vis = d3.select("#chart") var vis = d3.select("#chart")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
vis.selectAll("path") vis.selectAll("path")
.data(data0) .data(data0)
.enter().append("svg:path") .enter().append("path")
.style("fill", function() { return color(Math.random()); }) .style("fill", function() { return color(Math.random()); })
.attr("d", area); .attr("d", area);

20
examples/superformula/dot.html
Просмотреть файл

@ -44,24 +44,24 @@ var w = 450,
color = d3.scale.category10(); color = d3.scale.category10();
var vis = d3.select("body") var vis = d3.select("body")
.append("svg:svg") .append("svg")
.attr("width", w + p * 2) .attr("width", w + p * 2)
.attr("height", h + p * 2) .attr("height", h + p * 2)
.append("svg:g") .append("g")
.attr("transform", "translate(" + p + "," + p + ")"); .attr("transform", "translate(" + p + "," + p + ")");
var xrule = vis.selectAll("g.x") var xrule = vis.selectAll("g.x")
.data(x.ticks(10)) .data(x.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "x"); .attr("class", "x");
xrule.append("svg:line") xrule.append("line")
.attr("x1", x) .attr("x1", x)
.attr("x2", x) .attr("x2", x)
.attr("y1", 0) .attr("y1", 0)
.attr("y2", h); .attr("y2", h);
xrule.append("svg:text") xrule.append("text")
.attr("x", x) .attr("x", x)
.attr("y", h + 3) .attr("y", h + 3)
.attr("dy", ".71em") .attr("dy", ".71em")
@ -70,29 +70,29 @@ xrule.append("svg:text")
var yrule = vis.selectAll("g.y") var yrule = vis.selectAll("g.y")
.data(y.ticks(10)) .data(y.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "y"); .attr("class", "y");
yrule.append("svg:line") yrule.append("line")
.attr("x1", 0) .attr("x1", 0)
.attr("x2", w) .attr("x2", w)
.attr("y1", y) .attr("y1", y)
.attr("y2", y); .attr("y2", y);
yrule.append("svg:text") yrule.append("text")
.attr("x", -3) .attr("x", -3)
.attr("y", y) .attr("y", y)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", "end") .attr("text-anchor", "end")
.text(y.tickFormat(10)); .text(y.tickFormat(10));
vis.append("svg:rect") vis.append("rect")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
vis.selectAll("path.dot") vis.selectAll("path.dot")
.data(data) .data(data)
.enter().append("svg:path") .enter().append("path")
.attr("class", "dot") .attr("class", "dot")
.attr("stroke", function(d, i) { return color(i); }) .attr("stroke", function(d, i) { return color(i); })
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }) .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })

4
examples/superformula/explorer.html
Просмотреть файл

@ -65,7 +65,7 @@ var types = {
var format = d3.format(".4n"), var format = d3.format(".4n"),
scale = d3.scale.linear().domain([-10, 20, 1000]).range([0, 800, 1000]); scale = d3.scale.linear().domain([-10, 20, 1000]).range([0, 800, 1000]);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", 960) .attr("width", 960)
.attr("height", 500); .attr("height", 500);
@ -74,7 +74,7 @@ var shape = superformula()
.size(100000) .size(100000)
.segments(3600); .segments(3600);
var path = svg.append("svg:path") var path = svg.append("path")
.attr("class", "big") .attr("class", "big")
.attr("transform", "translate(480,250)") .attr("transform", "translate(480,250)")
.attr("d", shape); .attr("d", shape);

8
examples/superformula/superformula.html
Просмотреть файл

@ -35,7 +35,7 @@ var x = d3.scale.ordinal()
.domain(superformulaTypes) .domain(superformulaTypes)
.rangePoints([0, 960], 1); .rangePoints([0, 960], 1);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", 960) .attr("width", 960)
.attr("height", 500); .attr("height", 500);
@ -50,17 +50,17 @@ var big = superformula()
svg.selectAll("a") svg.selectAll("a")
.data(superformulaTypes) .data(superformulaTypes)
.enter().append("svg:a") .enter().append("a")
.attr("xlink:title", String) .attr("xlink:title", String)
.attr("transform", function(d, i) { return "translate("+ x(d) + ",40)"; }) .attr("transform", function(d, i) { return "translate("+ x(d) + ",40)"; })
.append("svg:path") .append("path")
.attr("class", "small") .attr("class", "small")
.attr("d", small) .attr("d", small)
.on("mousedown", function() { d3.select(this).style("fill", "aliceblue"); }) .on("mousedown", function() { d3.select(this).style("fill", "aliceblue"); })
.on("mouseup", function() { d3.select(this).style("fill", null); }) .on("mouseup", function() { d3.select(this).style("fill", null); })
.on("click", function(d) { d3.select(".big").transition().duration(500).attr("d", big.type(d)); }); .on("click", function(d) { d3.select(".big").transition().duration(500).attr("d", big.type(d)); });
svg.append("svg:path") svg.append("path")
.attr("class", "big") .attr("class", "big")
.attr("transform", "translate(450,250)") .attr("transform", "translate(450,250)")
.attr("d", big); .attr("d", big);

10
examples/symbol-map/symbol-map.html
Просмотреть файл

@ -36,15 +36,15 @@ var r = d3.scale.sqrt()
// Our projection. // Our projection.
var xy = d3.geo.albersUsa(); var xy = d3.geo.albersUsa();
var svg = d3.select("body").append("svg:svg"); var svg = d3.select("body").append("svg");
svg.append("svg:g").attr("id", "states"); svg.append("g").attr("id", "states");
svg.append("svg:g").attr("id", "state-centroids"); svg.append("g").attr("id", "state-centroids");
d3.json("../data/us-states.json", function(collection) { d3.json("../data/us-states.json", function(collection) {
svg.select("#states") svg.select("#states")
.selectAll("path") .selectAll("path")
.data(collection.features) .data(collection.features)
.enter().append("svg:path") .enter().append("path")
.attr("d", d3.geo.path().projection(xy)); .attr("d", d3.geo.path().projection(xy));
}); });
@ -53,7 +53,7 @@ d3.json("../data/us-state-centroids.json", function(collection) {
.selectAll("circle") .selectAll("circle")
.data(collection.features .data(collection.features
.sort(function(a, b) { return b.properties.population - a.properties.population; })) .sort(function(a, b) { return b.properties.population - a.properties.population; }))
.enter().append("svg:circle") .enter().append("circle")
.attr("transform", function(d) { return "translate(" + xy(d.geometry.coordinates) + ")"; }) .attr("transform", function(d) { return "translate(" + xy(d.geometry.coordinates) + ")"; })
.attr("r", 0) .attr("r", 0)
.transition() .transition()

4
examples/touch/touch.html
Просмотреть файл

@ -27,7 +27,7 @@ svg {
var color = d3.scale.category10(); var color = d3.scale.category10();
var svg = d3.select("body").append("svg:svg"); var svg = d3.select("body").append("svg");
d3.select("body") d3.select("body")
.on("touchstart", touch) .on("touchstart", touch)
@ -42,7 +42,7 @@ function touch() {
.attr("cx", function(d) { return d[0]; }) .attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; }); .attr("cy", function(d) { return d[1]; });
circle.enter().append("svg:circle") circle.enter().append("circle")
.attr("class", "touch") .attr("class", "touch")
.attr("cx", function(d) { return d[0]; }) .attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; }) .attr("cy", function(d) { return d[1]; })

4
examples/transform/test.html
Просмотреть файл

@ -13,10 +13,10 @@
var outcome = d3.select("body").append("p"); var outcome = d3.select("body").append("p");
var g = d3.select("body").append("svg:svg") var g = d3.select("body").append("svg")
.attr("width", 10) .attr("width", 10)
.attr("height", 10) .attr("height", 10)
.append("svg:g"); .append("g");
var results = d3.select("body").append("table") var results = d3.select("body").append("table")
.style("display", "none"); .style("display", "none");

4
examples/transform/transform.html
Просмотреть файл

@ -26,13 +26,13 @@ var w = 960,
x = w / z, x = w / z,
y = h / z; y = h / z;
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
svg.selectAll("rect") svg.selectAll("rect")
.data(d3.range(x * y)) .data(d3.range(x * y))
.enter().append("svg:rect") .enter().append("rect")
.attr("transform", translate) .attr("transform", translate)
.attr("width", z) .attr("width", z)
.attr("height", z) .attr("height", z)

10
examples/tree/tree-dynamic.html
Просмотреть файл

@ -31,15 +31,15 @@ var w = 960,
duration = 750, duration = 750,
timer = setInterval(update, duration); timer = setInterval(update, duration);
var vis = d3.select("body").append("svg:svg") var vis = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(10, 10)"); .attr("transform", "translate(10, 10)");
vis.selectAll("circle") vis.selectAll("circle")
.data(tree(root)) .data(tree(root))
.enter().append("svg:circle") .enter().append("circle")
.attr("class", "node") .attr("class", "node")
.attr("r", 3.5) .attr("r", 3.5)
.attr("cx", x) .attr("cx", x)
@ -61,7 +61,7 @@ function update() {
.data(nodes, function(d) { return d.id; }); .data(nodes, function(d) { return d.id; });
// Enter any new nodes at the parent's previous position. // Enter any new nodes at the parent's previous position.
node.enter().append("svg:circle") node.enter().append("circle")
.attr("class", "node") .attr("class", "node")
.attr("r", 3.5) .attr("r", 3.5)
.attr("cx", function(d) { return d.parent.x0; }) .attr("cx", function(d) { return d.parent.x0; })
@ -82,7 +82,7 @@ function update() {
.data(tree.links(nodes), function(d) { return d.target.id; }); .data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position. // Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "circle") link.enter().insert("path", "circle")
.attr("class", "link") .attr("class", "link")
.attr("d", function(d) { .attr("d", function(d) {
var o = {x: d.source.x0, y: d.source.y0}; var o = {x: d.source.x0, y: d.source.y0};

12
examples/tree/tree-interactive.html
Просмотреть файл

@ -43,10 +43,10 @@ var tree = d3.layout.tree()
var diagonal = d3.svg.diagonal() var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; }); .projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w + m[1] + m[3]) .attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2]) .attr("height", h + m[0] + m[2])
.append("svg:g") .append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
@ -79,16 +79,16 @@ function update(source) {
.data(nodes, function(d) { return d.id || (d.id = ++i); }); .data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position. // Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("svg:g") var nodeEnter = node.enter().append("g")
.attr("class", "node") .attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click); .on("click", click);
nodeEnter.append("svg:circle") nodeEnter.append("circle")
.attr("r", 1e-6) .attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("svg:text") nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
@ -124,7 +124,7 @@ function update(source) {
.data(tree.links(nodes), function(d) { return d.target.id; }); .data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position. // Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g") link.enter().insert("path", "g")
.attr("class", "link") .attr("class", "link")
.attr("d", function(d) { .attr("d", function(d) {
var o = {x: source.x0, y: source.y0}; var o = {x: source.x0, y: source.y0};

12
examples/tree/tree-radial.js
Просмотреть файл

@ -7,10 +7,10 @@ var tree = d3.layout.tree()
var diagonal = d3.svg.diagonal.radial() var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", r * 2) .attr("width", r * 2)
.attr("height", r * 2 - 150) .attr("height", r * 2 - 150)
.append("svg:g") .append("g")
.attr("transform", "translate(" + r + "," + r + ")"); .attr("transform", "translate(" + r + "," + r + ")");
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
@ -18,20 +18,20 @@ d3.json("../data/flare.json", function(json) {
var link = vis.selectAll("path.link") var link = vis.selectAll("path.link")
.data(tree.links(nodes)) .data(tree.links(nodes))
.enter().append("svg:path") .enter().append("path")
.attr("class", "link") .attr("class", "link")
.attr("d", diagonal); .attr("d", diagonal);
var node = vis.selectAll("g.node") var node = vis.selectAll("g.node")
.data(nodes) .data(nodes)
.enter().append("svg:g") .enter().append("g")
.attr("class", "node") .attr("class", "node")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
node.append("svg:circle") node.append("circle")
.attr("r", 4.5); .attr("r", 4.5);
node.append("svg:text") node.append("text")
.attr("dx", function(d) { return d.x < 180 ? 8 : -8; }) .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
.attr("dy", ".31em") .attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })

12
examples/tree/tree.js
Просмотреть файл

@ -7,10 +7,10 @@ var tree = d3.layout.tree()
var diagonal = d3.svg.diagonal() var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; }); .projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg:svg") var vis = d3.select("#chart").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(40, 0)"); .attr("transform", "translate(40, 0)");
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
@ -18,20 +18,20 @@ d3.json("../data/flare.json", function(json) {
var link = vis.selectAll("path.link") var link = vis.selectAll("path.link")
.data(tree.links(nodes)) .data(tree.links(nodes))
.enter().append("svg:path") .enter().append("path")
.attr("class", "link") .attr("class", "link")
.attr("d", diagonal); .attr("d", diagonal);
var node = vis.selectAll("g.node") var node = vis.selectAll("g.node")
.data(nodes) .data(nodes)
.enter().append("svg:g") .enter().append("g")
.attr("class", "node") .attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("svg:circle") node.append("circle")
.attr("r", 4.5); .attr("r", 4.5);
node.append("svg:text") node.append("text")
.attr("dx", function(d) { return d.children ? -8 : 8; }) .attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3) .attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; }) .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })

10
examples/treemap/treemap-svg.js
Просмотреть файл

@ -7,25 +7,25 @@ var treemap = d3.layout.treemap()
.size([w, h]) .size([w, h])
.value(function(d) { return d.size; }); .value(function(d) { return d.size; });
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.append("svg:g") .append("g")
.attr("transform", "translate(-.5,-.5)"); .attr("transform", "translate(-.5,-.5)");
d3.json("../data/flare.json", function(json) { d3.json("../data/flare.json", function(json) {
var cell = svg.data([json]).selectAll("g") var cell = svg.data([json]).selectAll("g")
.data(treemap) .data(treemap)
.enter().append("svg:g") .enter().append("g")
.attr("class", "cell") .attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
cell.append("svg:rect") cell.append("rect")
.attr("width", function(d) { return d.dx; }) .attr("width", function(d) { return d.dx; })
.attr("height", function(d) { return d.dy; }) .attr("height", function(d) { return d.dy; })
.style("fill", function(d) { return d.children ? color(d.data.name) : null; }); .style("fill", function(d) { return d.children ? color(d.data.name) : null; });
cell.append("svg:text") cell.append("text")
.attr("x", function(d) { return d.dx / 2; }) .attr("x", function(d) { return d.dx / 2; })
.attr("y", function(d) { return d.dy / 2; }) .attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em") .attr("dy", ".35em")

6
examples/voroboids/voroboids.js
Просмотреть файл

@ -19,7 +19,7 @@ var vertices = boids.map(function(boid) {
d3.select(window).on("blur", nullGravity); d3.select(window).on("blur", nullGravity);
var svg = d3.select("#vis") var svg = d3.select("#vis")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.attr("class", "PiYG") .attr("class", "PiYG")
@ -32,13 +32,13 @@ var svg = d3.select("#vis")
svg.selectAll("path") svg.selectAll("path")
.data(d3.geom.voronoi(vertices)) .data(d3.geom.voronoi(vertices))
.enter().append("svg:path") .enter().append("path")
.attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; }) .attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }); .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
svg.selectAll("circle") svg.selectAll("circle")
.data(vertices) .data(vertices)
.enter().append("svg:circle") .enter().append("circle")
.attr("transform", function(d) { return "translate(" + d + ")"; }) .attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 2); .attr("r", 2);

6
examples/voronoi/voronoi.js
Просмотреть файл

@ -6,7 +6,7 @@ var vertices = d3.range(100).map(function(d) {
}); });
var svg = d3.select("#chart") var svg = d3.select("#chart")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
.attr("class", "PiYG") .attr("class", "PiYG")
@ -14,13 +14,13 @@ var svg = d3.select("#chart")
svg.selectAll("path") svg.selectAll("path")
.data(d3.geom.voronoi(vertices)) .data(d3.geom.voronoi(vertices))
.enter().append("svg:path") .enter().append("path")
.attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; }) .attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }); .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
svg.selectAll("circle") svg.selectAll("circle")
.data(vertices.slice(1)) .data(vertices.slice(1))
.enter().append("svg:circle") .enter().append("circle")
.attr("transform", function(d) { return "translate(" + d + ")"; }) .attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 2); .attr("r", 2);

20
examples/zoom-pan/zoom-pan-transform.html
Просмотреть файл

@ -32,30 +32,30 @@ var y = d3.scale.linear()
.domain([+1.00, -1.00]) .domain([+1.00, -1.00])
.range([0, size[1]]); .range([0, size[1]]);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", size[0] + padding[3] + padding[1]) .attr("width", size[0] + padding[3] + padding[1])
.attr("height", size[1] + padding[0] + padding[2]) .attr("height", size[1] + padding[0] + padding[2])
.attr("pointer-events", "all") .attr("pointer-events", "all")
.append("svg:g") .append("g")
.attr("transform", "translate(" + padding[3] + "," + padding[0] + ")") .attr("transform", "translate(" + padding[3] + "," + padding[0] + ")")
.call(d3.behavior.zoom() .call(d3.behavior.zoom()
.extent([[0, size[0]], [0, size[1]], [0, Infinity]]) .extent([[0, size[0]], [0, size[1]], [0, Infinity]])
.on("zoom", redraw)) .on("zoom", redraw))
.append("svg:g"); .append("g");
// Generate x-ticks… // Generate x-ticks…
var gx = svg.selectAll("g.x") var gx = svg.selectAll("g.x")
.data(x.ticks(10)) .data(x.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "x") .attr("class", "x")
.attr("transform", tx); .attr("transform", tx);
gx.append("svg:line") gx.append("line")
.attr("stroke", stroke) .attr("stroke", stroke)
.attr("y1", 0) .attr("y1", 0)
.attr("y2", size[1]); .attr("y2", size[1]);
gx.append("svg:text") gx.append("text")
.attr("y", size[1]) .attr("y", size[1])
.attr("dy", "1em") .attr("dy", "1em")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
@ -64,22 +64,22 @@ gx.append("svg:text")
// Generate y-ticks… // Generate y-ticks…
var gy = svg.selectAll("g.y") var gy = svg.selectAll("g.y")
.data(y.ticks(10)) .data(y.ticks(10))
.enter().append("svg:g") .enter().append("g")
.attr("class", "y") .attr("class", "y")
.attr("transform", ty); .attr("transform", ty);
gy.append("svg:line") gy.append("line")
.attr("stroke", stroke) .attr("stroke", stroke)
.attr("x1", 0) .attr("x1", 0)
.attr("x2", size[0]); .attr("x2", size[0]);
gy.append("svg:text") gy.append("text")
.attr("x", -3) .attr("x", -3)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", "end") .attr("text-anchor", "end")
.text(y.tickFormat(10)); .text(y.tickFormat(10));
svg.append("svg:rect") svg.append("rect")
.attr("width", size[0]) .attr("width", size[0])
.attr("height", size[1]) .attr("height", size[1])
.attr("stroke", stroke) .attr("stroke", stroke)

22
examples/zoom-pan/zoom-pan.html
Просмотреть файл

@ -32,25 +32,25 @@ var y = d3.scale.linear()
.domain([+1.00, -1.00]) .domain([+1.00, -1.00])
.range([0, size[1]]); .range([0, size[1]]);
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg")
.attr("width", size[0] + padding[3] + padding[1]) .attr("width", size[0] + padding[3] + padding[1])
.attr("height", size[1] + padding[0] + padding[2]) .attr("height", size[1] + padding[0] + padding[2])
.attr("pointer-events", "all") .attr("pointer-events", "all")
.append("svg:g") .append("g")
.attr("transform", "translate(" + padding[3] + "," + padding[0] + ")") .attr("transform", "translate(" + padding[3] + "," + padding[0] + ")")
.call(d3.behavior.zoom() .call(d3.behavior.zoom()
.extent([[0, size[0]], [0, size[1]], [0, 3]]) .extent([[0, size[0]], [0, size[1]], [0, 3]])
.on("zoom", redraw)); .on("zoom", redraw));
svg.append("svg:rect") svg.append("rect")
.attr("width", size[0]) .attr("width", size[0])
.attr("height", size[1]) .attr("height", size[1])
.attr("stroke", "none") .attr("stroke", "none")
.style("fill", "#fff"); .style("fill", "#fff");
svg.append("svg:a") svg.append("a")
.attr("xlink:href", "http://mbostock.github.com/d3/") .attr("xlink:href", "http://mbostock.github.com/d3/")
.append("svg:text") .append("text")
.style("font-size", "3em") .style("font-size", "3em")
.attr("transform", "translate(110.5, 110.5)") .attr("transform", "translate(110.5, 110.5)")
.text("D3.js"); .text("D3.js");
@ -71,16 +71,16 @@ function redraw() {
gx.select("text") gx.select("text")
.text(fx); .text(fx);
var gxe = gx.enter().insert("svg:g", "a") var gxe = gx.enter().insert("g", "a")
.attr("class", "x") .attr("class", "x")
.attr("transform", tx); .attr("transform", tx);
gxe.append("svg:line") gxe.append("line")
.attr("stroke", stroke) .attr("stroke", stroke)
.attr("y1", 0) .attr("y1", 0)
.attr("y2", size[1]); .attr("y2", size[1]);
gxe.append("svg:text") gxe.append("text")
.attr("y", size[1]) .attr("y", size[1])
.attr("dy", "1em") .attr("dy", "1em")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
@ -96,16 +96,16 @@ function redraw() {
gy.select("text") gy.select("text")
.text(fy); .text(fy);
var gye = gy.enter().insert("svg:g", "a") var gye = gy.enter().insert("g", "a")
.attr("class", "y") .attr("class", "y")
.attr("transform", ty); .attr("transform", ty);
gye.append("svg:line") gye.append("line")
.attr("stroke", stroke) .attr("stroke", stroke)
.attr("x1", 0) .attr("x1", 0)
.attr("x2", size[0]); .attr("x2", size[0]);
gye.append("svg:text") gye.append("text")
.attr("x", -3) .attr("x", -3)
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", "end") .attr("text-anchor", "end")

18
examples/zoom/zoom.html
Просмотреть файл

@ -35,15 +35,15 @@ var w = 960,
y2 = d3.scale.linear().range([h2, 0]); y2 = d3.scale.linear().range([h2, 0]);
var svg = d3.select("body") var svg = d3.select("body")
.append("svg:svg") .append("svg")
.attr("width", w) .attr("width", w)
.attr("height", h1 + h2); .attr("height", h1 + h2);
// Focus view. // Focus view.
var focus = svg.append("svg:g"); var focus = svg.append("g");
// Context view. // Context view.
var context = svg.append("svg:g") var context = svg.append("g")
.attr("transform", "translate(0," + h1 + ")"); .attr("transform", "translate(0," + h1 + ")");
d3.csv("dji.csv", function(csv) { d3.csv("dji.csv", function(csv) {
@ -67,21 +67,21 @@ d3.csv("dji.csv", function(csv) {
y2.domain([0, maxY]); y2.domain([0, maxY]);
// Focus view. // Focus view.
focus.append("svg:path") focus.append("path")
.data([csv]) .data([csv])
.attr("d", d3.svg.area() .attr("d", d3.svg.area()
.x(function(d) { return x(d.x); }) .x(function(d) { return x(d.x); })
.y0(y1(0)) .y0(y1(0))
.y1(function(d) { return y1(d.y); })); .y1(function(d) { return y1(d.y); }));
focus.append("svg:line") focus.append("line")
.attr("x1", 0) .attr("x1", 0)
.attr("x2", w) .attr("x2", w)
.attr("y1", y1(0)) .attr("y1", y1(0))
.attr("y2", y1(0)); .attr("y2", y1(0));
// Context view. // Context view.
context.append("svg:rect") context.append("rect")
.attr("width", w) .attr("width", w)
.attr("height", h2) .attr("height", h2)
.attr("fill", "none") .attr("fill", "none")
@ -89,7 +89,7 @@ d3.csv("dji.csv", function(csv) {
.attr("cursor", "crosshair") .attr("cursor", "crosshair")
.on("mousedown", mousedown); .on("mousedown", mousedown);
context.append("svg:path") context.append("path")
.data([csv]) .data([csv])
.attr("pointer-events", "none") .attr("pointer-events", "none")
.attr("d", d3.svg.area() .attr("d", d3.svg.area()
@ -97,14 +97,14 @@ d3.csv("dji.csv", function(csv) {
.y0(y2(0)) .y0(y2(0))
.y1(function(d) { return y2(d.y); })); .y1(function(d) { return y2(d.y); }));
context.append("svg:line") context.append("line")
.attr("x1", 0) .attr("x1", 0)
.attr("x2", w) .attr("x2", w)
.attr("y1", y2(0)) .attr("y1", y2(0))
.attr("y2", y2(0)); .attr("y2", y2(0));
// Active focus region. // Active focus region.
active = context.append("svg:rect") active = context.append("rect")
.attr("pointer-events", "none") .attr("pointer-events", "none")
.attr("id", "active") .attr("id", "active")
.attr("x", x(x0 = minX)) .attr("x", x(x0 = minX))

2
package.json
Просмотреть файл

@ -1,6 +1,6 @@
{ {
"name": "d3", "name": "d3",
"version": "2.6.0", "version": "2.6.1",
"description": "A small, free JavaScript library for manipulating documents based on data.", "description": "A small, free JavaScript library for manipulating documents based on data.",
"keywords": [ "keywords": [
"dom", "dom",

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше