Problemas con D3 - Gráfico de barras Buenos días,
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> Aquí adjunto el CSV:
Código:
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
Gracias a todos de antemano,
Última edición por rostein; 22/08/2016 a las 05:47
Razón: Contenía algún error.
|