Estoy poco a poco aprendiendo usar D3 y estoy intentando hacer un gráfico siguiendo este modelo: https://bl.ocks.org/mbostock/3886394. No obstante, el resultado no es el que yo deseo.
No consigo ordernar el eje X por años: http://imgur.com/a/j6g39
Os dejo el código por si podéis echarle un vistazo.
Código HTML:
<!DOCTYPE html> <meta charset="utf-8"> <style> .bar { fill: steelblue; } .axis path { display: none; } </style> <svg width="960" height="500"></svg> <script src="//d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), margin = {top: 20, right: 60, bottom: 30, left: 40}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var x = d3.scaleBand() .rangeRound([0, width]) .padding(0.1) .align(0.1); var y = d3.scaleLinear() .rangeRound([height, 0]); var z = d3.scaleOrdinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var stack = d3.stack() .offset(d3.stackOffsetExpand); d3.csv("duracion_matrimonio.csv", type, function(error, data) { if (error) throw error; data.sort(function(a, b) { return b[data.columns[1]] / b.total - a[data.columns[1]] / a.total; }); x.domain(data.map(function(d) { return d.Anno; })); z.domain(data.columns.slice(1)); var serie = g.selectAll(".serie") .data(stack.keys(data.columns.slice(1))(data)) .enter().append("g") .attr("class", "serie") .attr("fill", function(d) { return z(d.key); }); serie.selectAll("rect") .data(function(d) { return d; }) .enter().append("rect") .attr("x", function(d) { return x(d.data.Anno); }) .attr("y", function(d) { return y(d[1]); }) .attr("height", function(d) { return y(d[0]) - y(d[1]); }) .attr("width", x.bandwidth()); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y).ticks(10, "%")); var legend = serie.append("g") .attr("class", "legend") .attr("transform", function(d) { var d = d[d.length - 1]; return "translate(" + (x(d.data.Anno) + x.bandwidth()) + "," + ((y(d[0]) + y(d[1])) / 2) + ")"; }); legend.append("line") .attr("x1", -6) .attr("x2", 6) .attr("stroke", "#000"); legend.append("text") .attr("x", 9) .attr("dy", "0.35em") .attr("fill", "#000") .style("font", "10px sans-serif") .text(function(d) { return d.key; }); }); function type(d, i, columns) { for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]]; d.total = t; return d; } </script>
Código:
Gracias a todos de antemano, Anno,Menos de 1 año,1 a 2 años,3 a 5 años,6 a 10 años,11 a 15 años,16 a 19 años,20 y más años,No consta 1998,0,811,4.328,8.085,5.949,4.285,10.622,1.754 1999,0,936,4.286,8.257,6.086,4.094,10.871,1.571 2000,0,838,4.558,8.658,6.309,4.190,11.749,1.441 2001,0,910,4.718,8.927,6.933,4.121,12.033,1.600 2002,0,978,5.331,9.544,7.366,4.254,12.564,1.584 2003,0,1.086,6.048,10.188,8.295,4.620,13.560,1.651 2004,0,1.180,6.702,11.059,9.336,5.535,15.279,1.883 2005,60,4.149,10.496,15.262,12.201,7.570,19.520,3.590 2006,945,9.152,17.871,26.130,20.392,13.923,34.355,4.184 2007,1.095,8.441,16.924,26.405,20.873,14.898,37.085,0 2008,841,6.894,13.828,20.247,15.584,11.635,29.178,0 2009,841,6.894,13.828,20.247,15.584,11.635,29.178,0 2010,816,7.366,14.906,21.232,16.408,11.721,30.241,0 2011,761,6.602,15.059,21.588,16.801,11.300,31.179,0 2012,858,6.198,15.201,21.360,17.146,11.325,31.764,0
