Javascript 数据阵列叠层图

我试着创建像这样的堆叠条形图。但我不想使用.tsv文件

如何使用如下数组创建堆叠条形图

var data=[
    {date:'Jan',total:100, disease:20, wounds: 5,  other: 10},
    {date:'Feb',total:200, disease:25, wounds: 10, other: 20}   
];

---

任何建议都值得感谢。

以下是您链接的bl.ock的步骤（请记住，由于您没有提供您的代码，我将专门为该bl.ock编写答案）：

硬编码您的数据：

var crimea = [{
    date: "4/1854",
    total: "8571",
    disease: "1",
    wounds: "0",
    other: "5"
}, {
    date: "5/1854",
    total: "23333",
    disease: "12",
    wounds: "0",
    other: "9"
},
etc...
]

将行函数移动到

forEach

循环：

crimea.forEach(function(d) {
    d.date = parseDate(d.date);
    causes.forEach(function(c) {
        d[c] = +d[c];
    });
})

摆脱TSV

这是包含这些更改的代码：

.轴文本{
字体：10px无衬线；
}
.轴线，
.轴路径{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.轴--x路径{
显示：无；
}
var原因=[“伤口”、“其他”、“疾病”]；
var parseDate=d3.time.format（“%m/%Y”）.parse；
var保证金={
前20名，
右:50,，
底数：30，
左：20
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]）；
变量y=d3.scale.linear（）
.rangeRound（[高度，0]）；
var z=d3.scale.category10（）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.tickFormat（d3.time.format（“%b”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“权利”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
克里米亚湾=[{
日期：“1854年4月”，
总数：“8571”，
疾病：“1”，
伤口：“0”，
其他：“5”
},
{
日期：“1854年5月”，
总数：“23333”，
疾病：“12”，
伤口：“0”，
其他：“9”
},
{
日期：“1854年6月”，
总数：“28333”，
疾病：“11”，
伤口：“0”，
其他：“6”
},
{
日期：“1854年7月”，
总数：“28772”，
疾病：“359”，
伤口：“0”，
其他：“23”
},
{
日期：“1854年8月”，
总数：“30 246”，
疾病：“828”，
伤口：“1”，
其他：“30”
},
{
日期：“1854年9月”，
总数：“30290”，
疾病：“788”，
伤口：“81”，
其他：“70”
},
{
日期：“1854年10月”，
总数：“30643”，
疾病：“503”，
伤口：“132”，
其他：“128”
},
{
日期：“1854年11月”，
总数：“29736”，
疾病：“844”，
伤口：“287”，
其他：“106”
},
{
日期：“1854年12月”，
总数：“32779”，
疾病：“1725”，
伤口：“114”，
其他：“131”
},
{
日期：“1855年1月”，
总数：“32393”，
疾病：“2761”，
伤口：“83”，
其他：“324”
},
{
日期：“1855年2月”，
总数：“30919”，
疾病：“2120”，
伤口：“42”，
其他：“361”
},
{
日期：“1855年3月”，
总数：“30107”，
疾病：“1205”，
伤口：“32”，
其他：“172”
},
{
日期：“1855年4月”，
总数：“32252”，
疾病：“477”，
伤口：“48”，
其他：“57”
},
{
日期：“1855年5月”，
总数：“35473”，
疾病：“508”，
伤口：“49”，
其他：“37”
},
{
日期：“1855年6月”，
总数：“38863”，
疾病：“802”，
伤口：“209”，
其他：“31”
},
{
日期：“1855年7月”，
总数：“42647”，
疾病：“382”，
伤口：“134”，
其他：“33”
},
{
日期：“1855年8月”，
总数：“44614”，
疾病：“483”，
伤口：“164”，
其他：“25”
},
{
日期：“1855年9月”，
总数：“47751”，
疾病：“189”，
伤口：“276”，
其他：“20”
},
{
日期：“1855年10月”，
总数：“46852”，
疾病：“128”，
伤口：“53”，
其他：“18”
},
{
日期：“1855年11月”，
总数：“37853”，
疾病：“178”，
伤口：“33”，
其他：“32”
},
{
日期：“1855年12月”，
总数：“43217”，
疾病：“91”，
伤口：“18”，
其他：“28”
},
{
日期：“1856年1月”，
总数：“44212”，
疾病：“42”，
伤口：“2”，
其他：“48”
},
{
日期：“1856年2月”，
总数：“43485”，
疾病：“24”，
伤口：“0”，
其他：“19”
},
{
日期：“1856年3月”，
总数：“46140”，
疾病：“15”，
伤口：“0”，
其他：“35”
}
];
克里米亚.forEach（职能（d）{
d、 日期=解析日期（d.date）；
原因。forEach（功能（c）{
d[c]=+d[c]；
});
})
var layers=d3.layout.stack（）{
返回克里米亚地图（函数（d）{
返回{
x:d.date，
y:d[c]
};
});
}));
x、 域（层[0]。映射（函数（d）{
返回d.x；
}));
y、 域（[0，d3.max）（层[layers.length-1]，函数（d）{
返回d.y0+d.y；
})]).nice（）；
var layer=svg.selectAll（“.layer”）
.数据（图层）
.enter（）.append（“g”）
.attr（“类”、“层”）
.样式（“填充”，功能（d，i）{
返回z（i）；
});
图层。选择全部（“rect”）
.数据（功能（d）{
返回d；
})
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回x（d.x）；
})
.attr（“y”，函数（d）{
返回y（d.y+d.y0）；
})
.attr（“高度”，功能（d）{
返回y（d.y0）-y（d.y+d.y0）；
})
.attr（“宽度”，x.rangeBand（）-1）；
svg.append（“g”）
.attr（“类”、“轴--x”）
.attr（“