删除D3条形图上的每个其他列标签

Question

我试图在D3中重新创建以下内容

到目前为止我已经得到了以下内容：http://codepen.io/jpezninjo/pen/dNwmVK

我查了一下，我能找到的最好的答案是：Show every other tick label on d3 time axis?，但我没有使用类来创建每个列标签。我认为以下两行是控制我标签的行，但我不确定如何解决这个问题。

var x = d3.scaleBand()
.range([0, width])
.padding(0.1);

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

我还试图找出如何在条形图的左侧和右侧放置一些填充

Answer 1

至少有两种可能的方式：

1. 将X轴设为时间轴，并使用d3.timeDay.every(2)指定每隔第二天。这种方法如下所示：http://codepen.io/anon/pen/YNdaRB。

   关键部分：var axisBottom = d3.axisBottom(x).ticks(d3.timeDay).tickArguments([d3.timeDay.every(2)]);。

   为了使这项工作，我还必须（a）使d.key等于parseDate的结果而不是格式化的日期字符串，（b）硬编码条的宽度代替使用x.bandwidth()和（c）将x轴平移width/2 px以使其在条形下方居中（第94行）。可能有更好的方法（b）和（c），但我主要想表现d3.timeDay.every(2)的能力（docs）。

2. 使用您当前的方法，但将样式应用于每个第二个刻度。 d3自动添加一些类，因此选择刻度很容易。这是他们在您链接的帖子中描述的内容。 http://codepen.io/anon/pen/qRLogy?editors=1010

   关键部分：d3.selectAll(".tick text").style("display", function (d, i) { return i % 2 ? "none" : "initial" })