我想出了如何将数据输入到这个d3图表中,但我似乎无法弄清楚如何在x和y轴上放置标签。我希望将字符串作为x轴的值。任何帮助将不胜感激。谢谢
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<form>
<label><input type="radio" name="mode" value="grouped"> Grouped</label>
<label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
</form>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var n = 3, // number of layers
m = 3, // number of samples per layer
stack = d3.layout.stack(),
// layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })),
layers = [
[
{"x":0,"y":200,"y0":0},
{"x":1,"y":150,"y0":0},
{"x":2,"y":100,"y0":0}
],
[
{"x":0,"y":100,"y0":1},
{"x":1,"y":80,"y0":1},
{"x":2,"y":70,"y0":1}
],
[
{"x":0,"y":30,"y0":2},
{"x":1,"y":40,"y0":2},
{"x":2,"y":50,"y0":2}
]
];
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
console.log(layers);
var margin = {top: 40, right: 10, bottom: 20, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([0, width], .08);
var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);
var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);
// var formatAxis = d3.format(" 0");
// var axis = d3.svg.axis()
// .scale(xScale)
// .tickFormat(formatAxis)
// .ticks(3)
// .tickValues([100, 200, 300]) //specify an array here for values
// .orient("bottom");
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(0)
.tickPadding(6)
.orient("bottom");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });
var rect = layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", height)
.attr("width", x.rangeBand())
.attr("height", 0);
rect.transition()
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
d3.selectAll("input").on("change", change);
var timeout = setTimeout(function() {
d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(timeout);
if (this.value === "grouped") transitionGrouped();
else transitionStacked();
}
function transitionGrouped() {
y.domain([0, yGroupMax]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
.attr("width", x.rangeBand() / n)
.transition()
.attr("y", function(d) { return y(d.y); })
.attr("height", function(d) { return height - y(d.y); });
}
function transitionStacked() {
y.domain([0, yStackMax]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.transition()
.attr("x", function(d) { return x(d.x); })
.attr("width", x.rangeBand());
}
// Inspired by Lee Byron's test data generator.
// function bumpLayer(n, o) {
// function bump(a) {
// var x = 1 / (.1 + Math.random()),
// y = 2 * Math.random() - .5,
// z = 10 / (.1 + Math.random());
// for (var i = 0; i < n; i++) {
// var w = (i / n - y) * z;
// a[i] += x * Math.exp(-w * w);
// }
// }
// var a = [], i;
// for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
// for (i = 0; i < 5; ++i) bump(a);
// return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
// }
</script>
答案 0 :(得分:1)
你看过tickFormat吗?请参阅此fiddle。
以下是感兴趣的代码:
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(2)
.tickPadding(6)
.tickFormat(function(d) { return "test" + d; })
.orient("bottom");