Allow custom ticks and tickFormat.
Rather than specifying the ticks directly, you specify the arguments that will be passed to the scale's ticks function. I suppose there are some obscure cases where you might want more direct control over the generation of ticks, but this makes the common case easy, and we could add a tickFunction property in the future if we wanted to allow arbitrary control. Alternatively, you could write a new scale type that supports the desired tick behavior (e.g., time scale).
This commit is contained in:
Родитель
15f1bee993
Коммит
770b24c742
20
d3.chart.js
20
d3.chart.js
|
@ -2,7 +2,9 @@
|
|||
d3.chart.axis = function() {
|
||||
var scale = d3.scale.linear(),
|
||||
tickSize = 6,
|
||||
tickPadding = 3;
|
||||
tickPadding = 3,
|
||||
tickArguments_ = [10],
|
||||
tickFormat_;
|
||||
|
||||
function axis(selection) {
|
||||
selection.each(function(d, i, j) {
|
||||
|
@ -10,8 +12,8 @@ d3.chart.axis = function() {
|
|||
|
||||
// Scale data.
|
||||
var range = scale.range(),
|
||||
ticks = scale.ticks(10),
|
||||
tickFormat = scale.tickFormat(10);
|
||||
ticks = scale.ticks.apply(scale, tickArguments_),
|
||||
tickFormat = tickFormat_ || scale.tickFormat.apply(scale, tickArguments_);
|
||||
|
||||
// If the transition is interrupted, then really we'd prefer to know the
|
||||
// current state of the scale rather than the previous state (at the end
|
||||
|
@ -90,6 +92,18 @@ d3.chart.axis = function() {
|
|||
return axis;
|
||||
};
|
||||
|
||||
axis.ticks = function() {
|
||||
if (!arguments.length) return tickArguments_;
|
||||
tickArguments_ = arguments;
|
||||
return axis;
|
||||
};
|
||||
|
||||
axis.tickFormat = function(x) {
|
||||
if (!arguments.length) return tickFormat_;
|
||||
tickFormat_ = x;
|
||||
return axis;
|
||||
};
|
||||
|
||||
return axis;
|
||||
};
|
||||
// Inspired by http://informationandvisualization.de/blog/box-plot
|
||||
|
|
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
@ -1,7 +1,9 @@
|
|||
d3.chart.axis = function() {
|
||||
var scale = d3.scale.linear(),
|
||||
tickSize = 6,
|
||||
tickPadding = 3;
|
||||
tickPadding = 3,
|
||||
tickArguments_ = [10],
|
||||
tickFormat_;
|
||||
|
||||
function axis(selection) {
|
||||
selection.each(function(d, i, j) {
|
||||
|
@ -9,8 +11,8 @@ d3.chart.axis = function() {
|
|||
|
||||
// Scale data.
|
||||
var range = scale.range(),
|
||||
ticks = scale.ticks(10),
|
||||
tickFormat = scale.tickFormat(10);
|
||||
ticks = scale.ticks.apply(scale, tickArguments_),
|
||||
tickFormat = tickFormat_ || scale.tickFormat.apply(scale, tickArguments_);
|
||||
|
||||
// If the transition is interrupted, then really we'd prefer to know the
|
||||
// current state of the scale rather than the previous state (at the end
|
||||
|
@ -89,5 +91,17 @@ d3.chart.axis = function() {
|
|||
return axis;
|
||||
};
|
||||
|
||||
axis.ticks = function() {
|
||||
if (!arguments.length) return tickArguments_;
|
||||
tickArguments_ = arguments;
|
||||
return axis;
|
||||
};
|
||||
|
||||
axis.tickFormat = function(x) {
|
||||
if (!arguments.length) return tickFormat_;
|
||||
tickFormat_ = x;
|
||||
return axis;
|
||||
};
|
||||
|
||||
return axis;
|
||||
};
|
||||
|
|
|
@ -90,6 +90,80 @@ suite.addBatch({
|
|||
}
|
||||
},
|
||||
|
||||
"ticks": {
|
||||
"defaults to 10": function(axis) {
|
||||
var a = axis();
|
||||
assert.deepEqual(a.ticks(), [10]);
|
||||
},
|
||||
"can be defined as any arguments": function(axis) {
|
||||
var b = {}, a = axis().ticks(b, 42), t = a.ticks();
|
||||
assert.equal(t[0], b);
|
||||
assert.equal(t[1], 42);
|
||||
assert.equal(t.length, 2);
|
||||
},
|
||||
"passes any arguments to the scale's ticks function": function(axis) {
|
||||
var x = d3.scale.linear(), b = {}, a = axis().ticks(b, 42).scale(x), aa = [],
|
||||
g = d3.select("body").html("").append("svg:g");
|
||||
x.ticks = function() { aa.push(arguments); return [42]; };
|
||||
g.call(a);
|
||||
assert.equal(aa.length, 1);
|
||||
assert.equal(aa[0].length, 2);
|
||||
assert.equal(aa[0][0], b);
|
||||
assert.equal(aa[0][1], 42);
|
||||
},
|
||||
"affects the generated ticks": function(axis) {
|
||||
var a = axis().ticks(20),
|
||||
g = d3.select("body").html("").append("svg:g").call(a),
|
||||
t = g.selectAll("g.tick");
|
||||
assert.equal(t[0].length, 21);
|
||||
}
|
||||
},
|
||||
|
||||
"tickFormat": {
|
||||
"defaults to null": function(axis) {
|
||||
var a = axis();
|
||||
assert.isTrue(a.tickFormat() == null);
|
||||
},
|
||||
"when null, uses the scale's tick format": function(axis) {
|
||||
var x = d3.scale.linear(), a = axis().scale(x),
|
||||
g = d3.select("body").html("").append("svg:g");
|
||||
|
||||
x.tickFormat = function() {
|
||||
return function(d) {
|
||||
return "foo-" + d;
|
||||
};
|
||||
};
|
||||
|
||||
g.call(a);
|
||||
var t = g.selectAll("g.tick text");
|
||||
assert.equal(t.text(), "foo-0");
|
||||
},
|
||||
"passes any arguments to the scale's tick format function": function(axis) {
|
||||
var b = {},
|
||||
x = d3.scale.linear(),
|
||||
a = axis().scale(x).ticks(b, 42),
|
||||
g = d3.select("body").html("").append("svg:g"),
|
||||
aa = [];
|
||||
|
||||
x.tickFormat = function() {
|
||||
aa.push(arguments);
|
||||
return String;
|
||||
};
|
||||
|
||||
g.call(a);
|
||||
assert.equal(aa.length, 1);
|
||||
assert.equal(aa[0].length, 2);
|
||||
assert.equal(aa[0][0], b);
|
||||
assert.equal(aa[0][1], 42);
|
||||
},
|
||||
"affects the generated tick labels": function(axis) {
|
||||
var a = axis().tickFormat(d3.format("+.2%")),
|
||||
g = d3.select("body").html("").append("svg:g").call(a),
|
||||
t = g.selectAll("g.tick text");
|
||||
assert.equal(t.text(), "+0.00%");
|
||||
}
|
||||
},
|
||||
|
||||
"enter": {
|
||||
"generates a new domain path": function(axis) {
|
||||
var a = axis(),
|
||||
|
|
Загрузка…
Ссылка в новой задаче