我尝试创建像https://bl.ocks.org/mbostock/1134768这样的堆积条形图。但我不想使用.tsv文件
如何使用如下所示的数组创建堆积条形图？
var data=[
{date:'Jan',total:100, disease:20, wounds: 5, other: 10},
{date:'Feb',total:200, disease:25, wounds: 10, other: 20}
];
任何建议都应该受到赞赏。
答案 0 :(得分：3)
这些是你链接的bl.ocks的步骤（请记住，因为你没有提供你的代码，我会特别写下bl.ocks的答案）：
对数据进行硬编码：
crimea.forEach(function(d) {
d.date = parseDate(d.date);
causes.forEach(function(c) {
d[c] = +d[c];
});
})
将行函数移动到<style>
.axis text {
font: 10px sans-serif;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis--x path {
display: none;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var causes = ["wounds", "other", "disease"];
var parseDate = d3.time.format("%m/%Y").parse;
var margin = {
top: 20,
right: 50,
bottom: 30,
left: 20
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width]);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var z = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("right");
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 crimea = [{
date: "4/1854",
total: "8571",
disease: "1",
wounds: "0",
other: "5"
},
{
date: "5/1854",
total: "23333",
disease: "12",
wounds: "0",
other: "9"
},
{
date: "6/1854",
total: "28333",
disease: "11",
wounds: "0",
other: "6"
},
{
date: "7/1854",
total: "28772",
disease: "359",
wounds: "0",
other: "23"
},
{
date: "8/1854",
total: "30246",
disease: "828",
wounds: "1",
other: "30"
},
{
date: "9/1854",
total: "30290",
disease: "788",
wounds: "81",
other: "70"
},
{
date: "10/1854",
total: "30643",
disease: "503",
wounds: "132",
other: "128"
},
{
date: "11/1854",
total: "29736",
disease: "844",
wounds: "287",
other: "106"
},
{
date: "12/1854",
total: "32779",
disease: "1725",
wounds: "114",
other: "131"
},
{
date: "1/1855",
total: "32393",
disease: "2761",
wounds: "83",
other: "324"
},
{
date: "2/1855",
total: "30919",
disease: "2120",
wounds: "42",
other: "361"
},
{
date: "3/1855",
total: "30107",
disease: "1205",
wounds: "32",
other: "172"
},
{
date: "4/1855",
total: "32252",
disease: "477",
wounds: "48",
other: "57"
},
{
date: "5/1855",
total: "35473",
disease: "508",
wounds: "49",
other: "37"
},
{
date: "6/1855",
total: "38863",
disease: "802",
wounds: "209",
other: "31"
},
{
date: "7/1855",
total: "42647",
disease: "382",
wounds: "134",
other: "33"
},
{
date: "8/1855",
total: "44614",
disease: "483",
wounds: "164",
other: "25"
},
{
date: "9/1855",
total: "47751",
disease: "189",
wounds: "276",
other: "20"
},
{
date: "10/1855",
total: "46852",
disease: "128",
wounds: "53",
other: "18"
},
{
date: "11/1855",
total: "37853",
disease: "178",
wounds: "33",
other: "32"
},
{
date: "12/1855",
total: "43217",
disease: "91",
wounds: "18",
other: "28"
},
{
date: "1/1856",
total: "44212",
disease: "42",
wounds: "2",
other: "48"
},
{
date: "2/1856",
total: "43485",
disease: "24",
wounds: "0",
other: "19"
},
{
date: "3/1856",
total: "46140",
disease: "15",
wounds: "0",
other: "35"
}
];
crimea.forEach(function(d) {
d.date = parseDate(d.date);
causes.forEach(function(c) {
d[c] = +d[c];
});
})
var layers = d3.layout.stack()(causes.map(function(c) {
return crimea.map(function(d) {
return {
x: d.date,
y: d[c]
};
});
}));
x.domain(layers[0].map(function(d) {
return d.x;
}));
y.domain([0, d3.max(layers[layers.length - 1], function(d) {
return d.y0 + d.y;
})]).nice();
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) {
return z(i);
});
layer.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", function(d) {
return y(d.y + d.y0);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y + d.y0);
})
.attr("width", x.rangeBand() - 1);
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis);
</script>循环：
DTE.ExecuteCommand("Debug.Start");摆脱TSV。
这是包含这些更改的代码：
performClick()