Expose tickSize and tickPadding properties.
This commit is contained in:
Родитель
4eedce984c
Коммит
7184c57fbb
12
d3.chart.js
12
d3.chart.js
|
@ -42,6 +42,18 @@ d3.chart.axis = function() {
|
|||
return axis;
|
||||
};
|
||||
|
||||
axis.tickSize = function(x) {
|
||||
if (!arguments.length) return tickSize;
|
||||
tickSize = +x;
|
||||
return axis;
|
||||
};
|
||||
|
||||
axis.tickPadding = function(x) {
|
||||
if (!arguments.length) return tickPadding;
|
||||
tickPadding = +x;
|
||||
return axis;
|
||||
};
|
||||
|
||||
return axis;
|
||||
};
|
||||
// Inspired by http://informationandvisualization.de/blog/box-plot
|
||||
|
|
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
@ -42,6 +42,10 @@ var m = [20, 20, 20, 20],
|
|||
var x = d3.time.scale().range([0, w]),
|
||||
y = d3.scale.linear().range([h, 0]);
|
||||
|
||||
// X-axis.
|
||||
var xAxis = d3.chart.axis()
|
||||
.scale(x);
|
||||
|
||||
// An area generator, for the light fill.
|
||||
var area = d3.svg.area()
|
||||
.interpolate("monotone")
|
||||
|
@ -93,7 +97,7 @@ d3.csv("../data/stocks.csv", function(data) {
|
|||
svg.append("svg:g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + h + ")")
|
||||
.call(d3.chart.axis().scale(x));
|
||||
.call(xAxis);
|
||||
|
||||
// Add the line path elements. Note: the y-domain is set per element.
|
||||
svg.append("svg:path")
|
||||
|
|
|
@ -41,5 +41,17 @@ d3.chart.axis = function() {
|
|||
return axis;
|
||||
};
|
||||
|
||||
axis.tickSize = function(x) {
|
||||
if (!arguments.length) return tickSize;
|
||||
tickSize = +x;
|
||||
return axis;
|
||||
};
|
||||
|
||||
axis.tickPadding = function(x) {
|
||||
if (!arguments.length) return tickPadding;
|
||||
tickPadding = +x;
|
||||
return axis;
|
||||
};
|
||||
|
||||
return axis;
|
||||
};
|
||||
|
|
|
@ -25,10 +25,60 @@ suite.addBatch({
|
|||
}
|
||||
},
|
||||
|
||||
"tickSize": {
|
||||
"defaults to six pixels": function(axis) {
|
||||
assert.equal(axis.tickSize(), 6);
|
||||
},
|
||||
"can be defined as a number": function(axis) {
|
||||
axis.tickSize(3);
|
||||
assert.equal(axis.tickSize(), 3);
|
||||
},
|
||||
"coerces input value to a number": function(axis) {
|
||||
axis.tickSize("3");
|
||||
assert.strictEqual(axis.tickSize(), 3);
|
||||
},
|
||||
"affects the generated domain path": function(axis) {
|
||||
axis.tickSize(3);
|
||||
var g = d3.select("body").html("").append("svg:g").call(axis),
|
||||
path = g.select("path.domain");
|
||||
assert.equal(path.attr("d"), "M0,3V0H1V3");
|
||||
},
|
||||
"affects the generated tick lines": function(axis) {
|
||||
axis.tickSize(3);
|
||||
var g = d3.select("body").html("").append("svg:g").call(axis),
|
||||
line = g.selectAll("g.tick line");
|
||||
line.each(function() {
|
||||
assert.equal(d3.select(this).attr("y2"), 3);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
"tickPadding": {
|
||||
"defaults to three pixels": function(axis) {
|
||||
assert.equal(axis.tickPadding(), 3);
|
||||
},
|
||||
"can be defined as a number": function(axis) {
|
||||
axis.tickPadding(6);
|
||||
assert.equal(axis.tickPadding(), 6);
|
||||
},
|
||||
"coerces input value to a number": function(axis) {
|
||||
axis.tickPadding("6");
|
||||
assert.strictEqual(axis.tickPadding(), 6);
|
||||
},
|
||||
"affects the generated tick labels": function(axis) {
|
||||
axis.tickSize(2).tickPadding(7);
|
||||
var g = d3.select("body").html("").append("svg:g").call(axis),
|
||||
text = g.selectAll("g.tick text");
|
||||
text.each(function() {
|
||||
assert.equal(d3.select(this).attr("y"), 9);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
"generates a domain path": function(axis) {
|
||||
var g = d3.select("body").html("").append("svg:g").call(axis),
|
||||
path = g.select("path.domain");
|
||||
assert.isFalse(path.empty());
|
||||
path = g.selectAll("path.domain");
|
||||
assert.equal(path[0].length, 1);
|
||||
assert.equal(path.attr("d"), "M0,6V0H1V6");
|
||||
assert.isNull(path.node().nextSibling);
|
||||
},
|
||||
|
|
Загрузка…
Ссылка в новой задаче