我正在尝试使用D3按月分组条形图,以便组合条在x轴上的月份名称下正确对齐。 我正在阅读的数据来自csv文件,如下所示:
月,预计销售/购买,采购,发货,供应商, JAN-17,310504,552339,259034,A,
JAN-17,610504,252339,659034,B,
FEB-17,910504,552339,259034,A,
FEB-17,210504,252339,659034,B,
FEB-17,810504,252339,659034,C,
这就是我尝试实现的目标http://imgur.com/qxnq5ZJ
一个月内每个堆叠的条形代表一个特定的供应商。供应商数量可能因月而异。
以下是我尝试过的代码:
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 50, 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])
.paddingInner(0.05)
.align(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
d3.csv("data.csv", function(d, i, columns) {
for (i = 1, t = 0; i < (columns.length-1); ++i)
t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}, function(error, data) {
if (error) throw error;
var keys = data.columns.slice(1,4);
x.domain(data.map(function(d) { return d.Month; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
z.domain(keys);
var stack = d3.stack()
.keys(data.columns.slice(1,4));
var stackedData = stack(data);
g.append("g")
.selectAll("g")
.data(stackedData)
.enter().append("g")
.attr("fill", function(d) { return z(d.key); })
.selectAll("rect")
.data(function(d,i) { console.info(d[i].data.Month);return d; })
.enter().append("g").append("rect")
.attr("x", function(d, i){return i * 75;})
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", 50);
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + 450 + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { return d; });
});
</script>
http://imgur.com/eUG56rr是上述代码的输出。