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;
|
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;
|
return axis;
|
||||||
};
|
};
|
||||||
// Inspired by http://informationandvisualization.de/blog/box-plot
|
// 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]),
|
var x = d3.time.scale().range([0, w]),
|
||||||
y = d3.scale.linear().range([h, 0]);
|
y = d3.scale.linear().range([h, 0]);
|
||||||
|
|
||||||
|
// X-axis.
|
||||||
|
var xAxis = d3.chart.axis()
|
||||||
|
.scale(x);
|
||||||
|
|
||||||
// An area generator, for the light fill.
|
// An area generator, for the light fill.
|
||||||
var area = d3.svg.area()
|
var area = d3.svg.area()
|
||||||
.interpolate("monotone")
|
.interpolate("monotone")
|
||||||
|
@ -93,7 +97,7 @@ d3.csv("../data/stocks.csv", function(data) {
|
||||||
svg.append("svg:g")
|
svg.append("svg:g")
|
||||||
.attr("class", "x axis")
|
.attr("class", "x axis")
|
||||||
.attr("transform", "translate(0," + h + ")")
|
.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.
|
// Add the line path elements. Note: the y-domain is set per element.
|
||||||
svg.append("svg:path")
|
svg.append("svg:path")
|
||||||
|
|
|
@ -41,5 +41,17 @@ d3.chart.axis = function() {
|
||||||
return axis;
|
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;
|
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) {
|
"generates a domain path": function(axis) {
|
||||||
var g = d3.select("body").html("").append("svg:g").call(axis),
|
var g = d3.select("body").html("").append("svg:g").call(axis),
|
||||||
path = g.select("path.domain");
|
path = g.selectAll("path.domain");
|
||||||
assert.isFalse(path.empty());
|
assert.equal(path[0].length, 1);
|
||||||
assert.equal(path.attr("d"), "M0,6V0H1V6");
|
assert.equal(path.attr("d"), "M0,6V0H1V6");
|
||||||
assert.isNull(path.node().nextSibling);
|
assert.isNull(path.node().nextSibling);
|
||||||
},
|
},
|
||||||
|
|
Загрузка…
Ссылка в новой задаче