考虑以下几点:
page.html:
<!DOCTYPE html>
<!-- https://bl.ocks.org/mbostock/3886208 -->
<style>
</style>
<script src="https://d3js.org/d3.v4.js"></script>
<body>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 1300 - margin.left - margin.right,
height = 700 - 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
// look at the .csv in Notepad! DO NOT LOOK AT EXCEL!
var parseDate = d3.timeParse("%m/%d/%Y");
var x = d3.scaleTime()
.range([0, width - margin.left - margin.right]);
var y = d3.scaleLinear().range([height, 0]);
var z = d3.scaleOrdinal()
.range(["#CE1126", "#00B6D0"]); // red and blue
var xAxis = d3.axisBottom(x)
.ticks(d3.timeMonth.every(1))
.tickFormat(d3.timeFormat("%b")); // label every month
// 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) {
//console.log(parseDate(d.date));
d.date = parseDate(d.date);
});
var keys = data.columns.slice(1);
data.sort(function(a, b) { return b.date - a.date; });
x.domain(d3.extent( data, 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));
// the bars
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 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", (width - margin.right- margin.left)/data.length );
// x-axis
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
});
</script>
</body>
测试数据.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
我们得到以下输出:
我想做两件事:
- 将轴稍微向右移动，使每个月的刻度位于每个柱的中点。轴仍应从第一根柱的开始延伸到最后一根柱的末端；滴答声只是移动了。
- 在第一个刻度(在本例中为 2012 年 11 月)的月份标签下方以及每次出现的“一月”下方显示年份值。
我不一定需要详细的解决方案；只知道去哪里找就好了。
最佳答案
您面临的关键问题是您的 x 域没有反射(reflect)您绘制数据的方式。因为您绘制的条形宽度为一个月，所以您的域会在结束点之后再延长一个月(它不会在 11 月 1 日结束，而是在 11 月 30 日结束)。这就是为什么不绘制轴的末端部分(域线)的原因。
换句话说，域中的最大值位于绘图区域的边缘。如果仔细观察，您可能会注意到最后一个条形图绘制在边距中 - 它从绘图区域的最大 svg x 值延伸，因此延伸超过轴。
这是使用带条形的时间刻度的关键挑战，轴上的任何点都只是一个点 - 当您将这些点表示为具有宽度时 - 并且您的刻度仅从起点延伸到终点。如果你想保持时间尺度，你需要扩展你的域以考虑最后一个条的宽度。由于您的数据点代表月份，因此您需要将 x 比例域扩展一个月:
x.domain(d3.extent( data, function(d){ return d.date }) );
var max = x.domain()[1]; // get the maximum date in the domain
var min = x.domain()[0]; // get the minimum date in the domain
var newMax = new Date();
newMax.setTime(max.getTime() + 29.99 * 86400000); // set a new max date for the end of November, see Gerardo's comment below for a better way to calculate dates. However, adding a full month may add a new month label to the chart. Removing it though, isn't that difficult.
x.domain([min,newMax]) // set the new domain.
此逻辑可能会根据您要终止的月份中的天数而改变。
您还应该相应地更改条形宽度:
var barWidth = (width - margin.right- margin.left)/(data.length+1)
现在您需要调整刻度。刻度标记刻度上的一个时间点，当您根据该点放置条形以使其具有 x 位置时，您需要将刻度向右移动条形宽度的一半。您可以这样做:
var axis = g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
axis.selectAll("g").select("text")
.attr("transform","translate(" + ( (width - margin.right- margin.left)/(data.length+1)/2 ) + ",0)");
这应该给你这样的东西:
参见 bl.ock .
我已将刻度线保留在原处，如果需要，您也可以翻译它们，但您需要删除第一个或最后一个，因为您需要的刻度线比您的柱线少。
你在这里问了两个不同的问题，所以我会提供一个显示年份的快速建议，使用第二个 x 轴，每年显示刻度并设置格式以显示年份(与几个月一样)。只需确保将其放置得较低(您可能需要在底部留出更多余量)。移除域线并移除(或格式化)刻度线。
关于d3.js - D3 : show years on first month and on January, 并将刻度移动到柱线中点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47875228/