我需要将日期字段组添加到图表。小组人数各异。我遵循了一些示例，但没有设法使日期字段进入图表。
我已经创建了显示路径的图表，但需要能够将各种系列嵌套在大小不同的组中
d3.csv（“ data.csv”，类型，函数（错误，数据）{ 如果（错误）抛出错误；
// Transform data (i.e., finding cumulative values and total) for easier charting
var cumulative = 0;
for (var i = 0; i < data.length; i++) {
data[i].start = cumulative;
cumulative += data[i].value;
data[i].end = cumulative;
data[i].class = (data[i].value >= 0) ? 'positive' : 'negative'
}
/* data.push({
name: 'Total',
end: cumulative,
start: 0,
class: 'total'
})*/
;
x0.domain(data.map(function(d) {
return d.name;
}));
y.domain(d3.extent(data, function(d) {
return d.end;
})).nice();
// add the x Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width / 2)
.attr("y", margin.bottom - 5);
// add the y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// append the rectangles for the bar chart
var bar = svg.selectAll(".bar")
.data(data)
.enter()
.append("path")
.attr("class", "bar")
.style('fill', function(d, i) {
return d.value < 0 ? colorLower : colorHigher;
})
.attr("d", function(d) {
var pathData;
var xStart = x0(d.name) + x0.bandwidth() / 2;
var yStart = Math.abs(y(d.start));
var yStart2 = Math.abs(y(d.end));
var arrowSize = x0.bandwidth() / 2; {
if (d.value > 0) {
var yEnd = Math.abs(y(d.end)) + arrowSize;
// Draw arrow pointing up if value is positive
pathData = "M " + xStart + " " + yStart + " " +
"L " + (xStart - arrowSize / 4) + " " + yStart + " " +
"L " + (xStart - arrowSize / 4) + " " + (yEnd - arrowSize / 2) + " " +
"L " + (xStart - arrowSize / 2) + " " + (yEnd - arrowSize / 2) + " " +
"L " + xStart + " " + (yEnd - arrowSize) + " " +
"L " + (xStart + arrowSize / 2) + " " + (yEnd - arrowSize / 2) + " " +
"L " + (xStart + arrowSize / 4) + " " + (yEnd - arrowSize / 2) + " " +
"L " + (xStart + arrowSize / 4) + " " + yStart + " z";
}
// Draw arrow pointing down if value is negative
else if (d.value < 0) {
var yEnd = Math.abs(y(d.end) - y(d.start));
pathData = "M " + xStart + " " + yStart + " " +
"L " + (xStart + arrowSize / 4) + " " + yStart + " " +
"L " + (xStart + arrowSize / 4) + " " + (yStart + yEnd - arrowSize / 2) + " " +
"L " + (xStart + arrowSize / 2) + " " + (yStart + yEnd - arrowSize / 2) + " " +
"L " + xStart + " " + (yStart + yEnd) + " " +
"L " + (xStart - arrowSize / 2) + " " + (yStart + yEnd - arrowSize / 2) + " " +
"L " + (xStart - arrowSize / 4) + " " + (yStart + yEnd - arrowSize / 2) + " " +
"L " + (xStart - arrowSize / 4) + " " + yStart + " z";
}
}
return pathData;
});
点击下面的链接查看塞子。