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

Question

我是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中上面的链接（因此每个刻度对应一个月），按月创建堆积条形图。

我收到的一些错误：

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

未捕获的TypeError：x.bandwidth不是函数

在page.html：65

在对象。（d3.v4.js：11453）

在Dispatch.call（d3.v4.js：792）

在XMLHttpRequest.respond（d3.v4.js：11378）

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

Answer 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)); })

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

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

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

问题描述投票：1回答：1

1个回答

最新问题

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

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1