javascript - how do I labels to the axis in this d3 example -
i figured out how enter data d3 chart can't seem figure out how put labels on both x , y axis. looking put strings values in x-axis. appreciated. thank
<!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 array here 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 * 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 * 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 * 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 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()); // (var = 0; < n; i++) { // var w = (i / n - y) * z; // a[i] += x * math.exp(-w * w); // } // } // var = [], i; // (i = 0; < n; ++i) a[i] = o + o * math.random(); // (i = 0; < 5; ++i) bump(a); // return a.map(function(d, i) { return {x: i, y: math.max(0, d)}; }); // } </script>
have looked tickformat? see fiddle.
here code of interest:
var xaxis = d3.svg.axis() .scale(x) .ticksize(2) .tickpadding(6) .tickformat(function(d) { return "test" + d; }) .orient("bottom");