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

Condense d3.interpolateTransform slightly. 

Also, fix the transform rotate test.
This commit is contained in:
Mike Bostock 2012-07-30 19:42:32 -07:00
Родитель 14ab1b3d01
Коммит ef8672cb7d
5 изменённых файлов: 230 добавлений и 213 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@ -1011,27 +1011,13 @@ d3.interpolateString = function(a, b) {
};
d3.interpolateTransform = function(a, b) {
var ga = document.createElementNS(d3.ns.prefix.svg, "g"),
gb = document.createElementNS(d3.ns.prefix.svg, "g");
if ((n = d3_interpolateTransformSimilar(a, b))) return n;
return (d3.interpolateTransform = function(a, b) {
ga.setAttribute("transform", a);
gb.setAttribute("transform", b);
a = ga.transform.baseVal;
b = gb.transform.baseVal;
if (d3_interpolateTransformSameType(a, b)) {
return d3.interpolateString(d3_interpolateTransformListString(a),
d3_interpolateTransformListString(b));
}
a = a.consolidate();
b = b.consolidate();
var s = [], // string constants and placeholders
q = [], // number interpolators
n,
A = new d3_transform(a ? a.matrix : d3_transformIdentity),
B = new d3_transform(b ? b.matrix : d3_transformIdentity),
A = d3.transform(a),
B = d3.transform(b),
ta = A.translate,
tb = B.translate,
ra = A.rotate,
@ -1076,43 +1062,59 @@ d3.interpolateTransform = function(a, b) {
while (++i < n) s[(o = q[i]).i] = o.x(t);
return s.join("");
};
})(a, b);
};
function d3_interpolateTransformListString(value) {
var result = [];
for (var i = 0, n = value.numberOfItems; i < n; i++) {
result.push(d3_interpolateTransformString(value.getItem(i)));
var d3_interpolateTransformSimilar = function(a, b) {
var ga = document.createElementNS(d3.ns.prefix.svg, "g"),
gb = document.createElementNS(d3.ns.prefix.svg, "g");
function similar(a, b) {
var i = -1,
n = a.numberOfItems,
type;
if (n !== b.numberOfItems) return false;
while (++i < n) {
if ((type = a.getItem(i).type) !== b.getItem(i).type || type <= 1) {
return false;
}
}
return true;
}
function format(l) {
var result = [],
i = -1,
n = l.numberOfItems,
m,
s;
while (++i < n) {
t = l.getItem(i);
m = t.matrix;
switch (t.type) {
case 1: result.push("matrix(", m.a, " ", m.b, " ", m.c, " ", m.d, " ", m.e, " ", m.f, ")"); break;
case 2: result.push("translate(", m.e, ",", m.f, ")"); break;
case 3: result.push("scale(", m.a, " ", m.d, ")"); break;
case 4: result.push("rotate(", t.angle, ")"); break;
case 5: result.push("skewX(", t.angle, ")"); break;
case 6: result.push("skewY(", t.angle, ")"); break;
}
}
return result.join("");
}
function d3_interpolateTransformString(t) {
var m = t.matrix;
switch (t.type) {
case SVGTransform.SVG_TRANSFORM_ROTATE: return "rotate(" + t.angle + ")";
case SVGTransform.SVG_TRANSFORM_SCALE: return "scale(" + m.a + " " + m.d + ")";
case SVGTransform.SVG_TRANSFORM_SKEWX: return "skewX(" + t.angle + ")";
case SVGTransform.SVG_TRANSFORM_SKEWY: return "skewY(" + t.angle + ")";
case SVGTransform.SVG_TRANSFORM_TRANSLATE:
return "translate(" + m.e + "," + m.f + ")";
case SVGTransform.SVG_TRANSFORM_MATRIX:
return "matrix(" + m.a + " " + m.b + " " + m.c + " " +
m.d + " " + m.e + " " + m.f + ")";
}
return "";
}
function d3_interpolateTransformSameType(a, b) {
var n = a.numberOfItems;
if (n !== b.numberOfItems) return false;
for (var i = 0, type; i < n; i++) {
if ((type = a.getItem(i).type) !== b.getItem(i).type ||
type === SVGTransform.SVG_TRANSFORM_UNKNOWN ||
type === SVGTransform.SVG_TRANSFORM_MATRIX) return false;
}
return true;
}
return (d3_interpolateTransformSimilar = function(a, b) {
ga.setAttribute("transform", a);
gb.setAttribute("transform", b);
a = ga.transform.baseVal;
b = gb.transform.baseVal;
return similar(a, b) && d3.interpolateString(format(a), format(b));
})(a, b);
};
d3.interpolateRgb = function(a, b) {
a = d3.rgb(a);
@ -2557,11 +2559,12 @@ var d3_timer_frame = window.requestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) { setTimeout(callback, 17); };
d3.transform = function(string) {
var g = document.createElementNS(d3.ns.prefix.svg, "g");
var g = document.createElementNS(d3.ns.prefix.svg, "g"),
identity = {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0};
return (d3.transform = function(string) {
g.setAttribute("transform", string);
var t = g.transform.baseVal.consolidate();
return new d3_transform(t ? t.matrix : d3_transformIdentity);
return new d3_transform(t ? t.matrix : identity);
})(string);
};
@ -2614,8 +2617,7 @@ function d3_transformCombine(a, b, k) {
return a;
}
var d3_transformDegrees = 180 / Math.PI,
d3_transformIdentity = {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0};
var d3_transformDegrees = 180 / Math.PI;
d3.mouse = function(container) {
return d3_mousePoint(container, d3_eventSource());
};

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

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

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

@ -47,17 +47,17 @@ td.success {
var format = d3.format(",.2f");
var tests = [
{start: 170, end: 225, expected: [ 170.00, -176.25, -162.50, -148.75, -135.00]},
{start: 225, end: 170, expected: [-135.00, -148.75, -162.50, -176.25, 170.00]},
{start: -170, end: -225, expected: [-170.00, 176.25, 162.50, 148.75, 135.00]},
{start: -225, end: -170, expected: [ 135.00, 148.75, 162.50, 176.25, -170.00]},
{start: -170, end: 170, expected: [-170.00, -175.00, 180.00, 175.00, 170.00]},
{start: 170, end: 225, expected: [ 170.00, 183.75, 197.50, 211.25, 225.00]},
{start: 225, end: 170, expected: [ 225.00, 211.25, 197.50, 183.75, 170.00]},
{start: -170, end: -225, expected: [ 190.00, 176.25, 162.50, 148.75, 135.00]},
{start: -225, end: -170, expected: [ 135.00, 148.75, 162.50, 176.25, 190.00]},
{start: -170, end: 170, expected: [ 190.00, 185.00, 180.00, 175.00, 170.00]},
{start: -170, end: 0, expected: [-170.00, -127.50, -85.00, -42.50, 0.00]},
{start: 170, end: 0, expected: [ 170.00, 127.50, 85.00, 42.50, 0.00]},
{start: -180, end: 90, expected: [ 180.00, 157.50, 135.00, 112.50, 90.00]},
{start: 180, end: 90, expected: [ 180.00, 157.50, 135.00, 112.50, 90.00]},
{start: -180, end: -90, expected: [-180.00, -157.50, -135.00, -112.50, -90.00]},
{start: 180, end: -90, expected: [ 180.00, -157.50, -135.00, -112.50, -90.00]}
{start: 180, end: -90, expected: [ 180.00, 202.50, 225.00, 247.50, 270.00]}
];
var tr = d3.select("tbody").selectAll("tr")
@ -84,24 +84,36 @@ tr.selectAll(".actual")
.text(function(d, i) { return format(d.actual); })
.attr("class", function(d) { return Math.abs(d.actual - d.expected) < .01 ? "success" : "fail"; });
tr.append("td").attr("width", 40).append("svg")
var ga = tr.append("td").attr("width", 40).append("svg")
.attr("width", 40)
.attr("height", 20)
.append("g")
.attr("transform", "translate(20,10)")
.append("path")
.attr("d", d3.svg.symbol().type("cross").size(120))
.append("g")
.each(animateExpected);
tr.append("td").attr("width", 40).append("svg")
ga.append("path")
.attr("d", d3.svg.symbol().type("cross").size(120));
ga.append("circle")
.attr("cx", 8)
.attr("r", 4);
var gb = tr.append("td").attr("width", 40).append("svg")
.attr("width", 40)
.attr("height", 20)
.append("g")
.attr("transform", "translate(20,10)")
.append("path")
.attr("d", d3.svg.symbol().type("cross").size(120))
.append("g")
.each(animateActual);
gb.append("path")
.attr("d", d3.svg.symbol().type("cross").size(120));
gb.append("circle")
.attr("cx", 8)
.attr("r", 4);
function animateExpected(d) {
d3.select(this).transition()
.duration(2500)
@ -109,9 +121,10 @@ function animateExpected(d) {
.each("end", animateExpected);
function rotateTween(d) {
if (d.start - d.end > 180) d.end += 360;
else if (d.end - d.start > 180) d.start += 360;
return d3.interpolateString("rotate(" + d.start + ")", "rotate(" + d.end + ")");
var a = d.start, b = d.end;
if (a - b > 180) b += 360;
else if (b - a > 180) a += 360;
return d3.interpolateString("rotate(" + a + ")", "rotate(" + b + ")");
}
}

98
src/core/interpolate.js
Просмотреть файл

@ -93,27 +93,13 @@ d3.interpolateString = function(a, b) {
};
d3.interpolateTransform = function(a, b) {
var ga = document.createElementNS(d3.ns.prefix.svg, "g"),
gb = document.createElementNS(d3.ns.prefix.svg, "g");
if ((n = d3_interpolateTransformSimilar(a, b))) return n;
return (d3.interpolateTransform = function(a, b) {
ga.setAttribute("transform", a);
gb.setAttribute("transform", b);
a = ga.transform.baseVal;
b = gb.transform.baseVal;
if (d3_interpolateTransformSameType(a, b)) {
return d3.interpolateString(d3_interpolateTransformListString(a),
d3_interpolateTransformListString(b));
}
a = a.consolidate();
b = b.consolidate();
var s = [], // string constants and placeholders
q = [], // number interpolators
n,
A = new d3_transform(a ? a.matrix : d3_transformIdentity),
B = new d3_transform(b ? b.matrix : d3_transformIdentity),
A = d3.transform(a),
B = d3.transform(b),
ta = A.translate,
tb = B.translate,
ra = A.rotate,
@ -158,43 +144,59 @@ d3.interpolateTransform = function(a, b) {
while (++i < n) s[(o = q[i]).i] = o.x(t);
return s.join("");
};
})(a, b);
};
function d3_interpolateTransformListString(value) {
var result = [];
for (var i = 0, n = value.numberOfItems; i < n; i++) {
result.push(d3_interpolateTransformString(value.getItem(i)));
var d3_interpolateTransformSimilar = function(a, b) {
var ga = document.createElementNS(d3.ns.prefix.svg, "g"),
gb = document.createElementNS(d3.ns.prefix.svg, "g");
function similar(a, b) {
var i = -1,
n = a.numberOfItems,
type;
if (n !== b.numberOfItems) return false;
while (++i < n) {
if ((type = a.getItem(i).type) !== b.getItem(i).type || type <= 1) {
return false;
}
}
return true;
}
function format(l) {
var result = [],
i = -1,
n = l.numberOfItems,
m,
s;
while (++i < n) {
t = l.getItem(i);
m = t.matrix;
switch (t.type) {
case 1: result.push("matrix(", m.a, " ", m.b, " ", m.c, " ", m.d, " ", m.e, " ", m.f, ")"); break;
case 2: result.push("translate(", m.e, ",", m.f, ")"); break;
case 3: result.push("scale(", m.a, " ", m.d, ")"); break;
case 4: result.push("rotate(", t.angle, ")"); break;
case 5: result.push("skewX(", t.angle, ")"); break;
case 6: result.push("skewY(", t.angle, ")"); break;
}
}
return result.join("");
}
function d3_interpolateTransformString(t) {
var m = t.matrix;
switch (t.type) {
case SVGTransform.SVG_TRANSFORM_ROTATE: return "rotate(" + t.angle + ")";
case SVGTransform.SVG_TRANSFORM_SCALE: return "scale(" + m.a + " " + m.d + ")";
case SVGTransform.SVG_TRANSFORM_SKEWX: return "skewX(" + t.angle + ")";
case SVGTransform.SVG_TRANSFORM_SKEWY: return "skewY(" + t.angle + ")";
case SVGTransform.SVG_TRANSFORM_TRANSLATE:
return "translate(" + m.e + "," + m.f + ")";
case SVGTransform.SVG_TRANSFORM_MATRIX:
return "matrix(" + m.a + " " + m.b + " " + m.c + " " +
m.d + " " + m.e + " " + m.f + ")";
}
return "";
}
function d3_interpolateTransformSameType(a, b) {
var n = a.numberOfItems;
if (n !== b.numberOfItems) return false;
for (var i = 0, type; i < n; i++) {
if ((type = a.getItem(i).type) !== b.getItem(i).type ||
type === SVGTransform.SVG_TRANSFORM_UNKNOWN ||
type === SVGTransform.SVG_TRANSFORM_MATRIX) return false;
}
return true;
}
return (d3_interpolateTransformSimilar = function(a, b) {
ga.setAttribute("transform", a);
gb.setAttribute("transform", b);
a = ga.transform.baseVal;
b = gb.transform.baseVal;
return similar(a, b) && d3.interpolateString(format(a), format(b));
})(a, b);
};
d3.interpolateRgb = function(a, b) {
a = d3.rgb(a);

8
src/core/transform.js
Просмотреть файл

@ -1,9 +1,10 @@
d3.transform = function(string) {
var g = document.createElementNS(d3.ns.prefix.svg, "g");
var g = document.createElementNS(d3.ns.prefix.svg, "g"),
identity = {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0};
return (d3.transform = function(string) {
g.setAttribute("transform", string);
var t = g.transform.baseVal.consolidate();
return new d3_transform(t ? t.matrix : d3_transformIdentity);
return new d3_transform(t ? t.matrix : identity);
})(string);
};
@ -56,5 +57,4 @@ function d3_transformCombine(a, b, k) {
return a;
}
var d3_transformDegrees = 180 / Math.PI,
d3_transformIdentity = {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0};
var d3_transformDegrees = 180 / Math.PI;