Question

请考虑以下事项：

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>

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

我们获得以下输出：

我想做两件事：

将轴稍微向右移动，使每个月的刻度位于每个柱的中点。轴应该仍然从第一个柱的开始延伸到最后一个柱的末端;蜱只是转移了。
显示第一个刻度的月份标签下的年份值（在本例中为2012年11月）以及每次出现的＆＃34; Jan。＆＃34;

我不一定需要详细的解决方案;只知道去哪儿会很棒。

Answer 1

您面临的关键问题是您的x域无法反映您绘制数据的方式。因为您将酒吧绘制为一个月宽，您的域名将延长一个月（超过您的终点）（它不会在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：显示第一个月和1月的年份，并将蜱转移到bar中点

1 个答案: