带有时间序列数据的堆积条形图答案

【问题标题】：Stacked Bar Chart with Time Series Data带有时间序列数据的堆积条形图
【发布时间】：2017-12-18 17:03:57
【问题描述】：

我是 D3.js 的新手，我正在为此使用 D3 v4。我已经看过https://bl.ocks.org/mbostock/3886208。

这是 .csv 文件 (test_data.csv)：

date,col_1,col_2
11/1/2012,1977652,1802851
12/1/2012,1128739,948687
1/1/2013,1201944,1514667
2/1/2013,1863148,1834006
3/1/2013,1314851,1906060
4/1/2013,1283943,1978702
5/1/2013,1127964,1195606
6/1/2013,1773254,977214
7/1/2013,1929574,1127450
8/1/2013,1980411,1808161
9/1/2013,1405691,1182788
10/1/2013,1336790,937890
11/1/2013,1851053,1358400
12/1/2013,1472623,1214610
1/1/2014,1155116,1757052
2/1/2014,1571611,1935038
3/1/2014,1898348,1320348
4/1/2014,1444838,1934789
5/1/2014,1235087,950194
6/1/2014,1272040,1580656
7/1/2014,980781,1680164
8/1/2014,1391291,1115999
9/1/2014,1211125,1542148
10/1/2014,1020824,1782795
11/1/2014,1685081,926612
12/1/2014,1469254,1767071
1/1/2015,1168523,935897
2/1/2015,1602610,1450541
3/1/2015,1830278,1354876
4/1/2015,1275158,1412555
5/1/2015,1560961,1839718
6/1/2015,949948,1587130
7/1/2015,1413765,1494446
8/1/2015,1166141,1305105
9/1/2015,958975,1202219
10/1/2015,902696,1023987
11/1/2015,961441,1865628
12/1/2015,1363145,1954046
1/1/2016,1862878,1470741
2/1/2016,1723891,1042760
3/1/2016,1906747,1169012
4/1/2016,1963364,1927063
5/1/2016,1899735,1936915
6/1/2016,1300369,1430697
7/1/2016,1777108,1401210
8/1/2016,1597045,1566763
9/1/2016,1558287,1140057
10/1/2016,1965665,1953595
11/1/2016,1800438,937551
12/1/2016,1689152,1221895
1/1/2017,1607824,1963282
2/1/2017,1878431,1415658
3/1/2017,1730296,1947106
4/1/2017,1956756,1696780
5/1/2017,1746673,1662892
6/1/2017,989702,1537646
7/1/2017,1098812,1592064
8/1/2017,1861973,1892987
9/1/2017,1129596,1406514
10/1/2017,1528632,1725020
11/1/2017,925850,1795575

这里是 page.html：

<!DOCTYPE html>
<!-- https://bl.ocks.org/mbostock/3886208 -->
<style>

rect.bar { fill: steelblue; }

</style>
<script src="https://d3js.org/d3.v4.js"></script>
<body>

<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 900 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);
            
var g = svg.append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            
// parse the date / time
var parseDate = d3.timeParse("%Y-%m-%d");

var x = d3.scaleTime()
          .domain([new Date(2012, 11, 1), new Date(2017, 11, 31)])
          .range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var z = d3.scaleOrdinal().range(["#F1F1F1", "#CE1126"])

// load .csv file
d3.csv("test_data.csv", function(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
  d.total = t;
  return d;
}, function(error, data){
    if (error) throw error;
    
    data.forEach(function(d) {
        d.date = parseDate(d.date);
    });
    
    var keys = data.columns.slice(1);
    
    data.sort(function(a, b) { return b.date - a.date; });
    x.domain(data.map(function(d){ return d.date }));
    y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
    z.domain(keys);
    
    console.log(d3.stack().keys(keys)(data));
    
    g.append("g")
     .selectAll("g")
     .data(d3.stack().keys(keys)(data))
     .enter().append("g")
     .attr("fill", function(d) { return z(d.key); })
     .selectAll("rect")
     .data(function(d) { return d; })
     .enter()
     .append("rect")
     .attr("x", function(d) { return console.log(x(d.data.date)); })
     .attr("y", function(d) { return y(d[1]); })
     .attr("height", function(d) { return y(d[0]) - y(d[1]); })
     .attr("width", x.bandwidth());
    
    
});
</script>

</body>

我的目标是根据上面的链接按月创建一个堆积条形图（因此每个刻度对应一个月），其中的值在col_1 和col_2 中。 p>

我收到的一些错误：

console.log(x(d.data.date))，由于某种原因，没有返回实际日期。
以下错误：

未捕获的类型错误：x.bandwidth 不是函数

在 page.html:65

在对象。 (d3.v4.js:11453)

在 Dispatch.call (d3.v4.js:792)

在 XMLHttpRequest.respond (d3.v4.js:11378)

我认为这个错误可能与我使用scaleTime 而不是scaleBand 这一事实有关，但我不确定。

【问题讨论】：

尝试使用 width/data.length 来均匀计算条形宽度。也许添加一些像素作为缓冲区。

标签： csv d3.js

【解决方案1】：

您的日期存在一些问题，这些问题需要正常工作才能使用时间刻度。

首先，您的日期格式是 4/1/2015，但您使用 d3.timeParse("%Y-%m-%d"); 解析它

你只会得到用这个解析的空值，看看这个尝试：

data.forEach(function(d) {
    d.date = parseDate(d.date);
    console.log(d.date); // null
});

当您使用斜线而不是破折号，并且您使用月、日、年时，请尝试：

d3.timeParse("%m/%d/%Y");

其次，与日期相关的是，您根据硬编码的最小和最大日期设置一个初始域，这是可行的，但是您用以下内容覆盖它：

 x.domain(data.map(function(d){ return d.date }));

时间尺度域包含域的最小值和最大值。您正在提供每个值的数组，而是使用：

x.domain(d3.extent( data, function(d){ return d.date }) );

在图表和条形宽度上，.bandwidth() 不是连续缩放的方法（因此您的错误：“未捕获的 TypeError：x.bandwidth 不是函数”）。在连续刻度中，条形图是根据它们的值放置的，没有自然条形宽度（条形图不以规则间距放置，除非每个数据值之间的增量相同）。

由于您每个月都有一个数据点（数据中没有空洞），并且每个数据点代表相同的时间长度，我们可以将条形宽度设置为绘图区域宽度的一小部分，其中绘图区域的宽度在每个数据点之间平均分配：

(width-margin.right-margin.left)/data.length

这是您的图表，其中包含这些更改：

这是一个有效的example。

最后，注意这里需要返回一个值：

.attr("x", function(d) { return console.log(x(d.data.date)); })

如果要调试，请在返回语句之前记录：

.attr("x", function(d) { console.log(x(d.date.date)); return x(d.data.date); })

【讨论】：