D3.js 年度总结条形图：使用顺序标度还是时间标度？

我有一个和迈克·博斯托克非常相似的条形图

我的数据集是一组从1970年到2015年的年份，并附有一个数字。将我的数据移植到示例代码将呈现：

哎呀！我希望减少一点滴答声，因此决定向x轴添加滴答声计数：

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(10);

但是，这不起作用，因为显然我们只能指定线性刻度上需要的刻度数。所以我决定使用，将我所有的年份数字转换为Javascript日期对象（设置为1月1日）：

现在我可以限制滴答声的数量，但是

• 记号放在我的横条的左边，我认为这看起来不正确
• 我不能再使用

  x.rangeBand（）

  来确定条的宽度

要获得图1的滴答声美学，但是图2的滴答声计数，我是否需要自己进行所有这些条坐标/宽度计算？我应该使用顺序音阶还是其他音阶

这里有两个选项

1.）您可以保留日期时间轴，但将日期+1.577e+10毫秒（6个月）移动，使其发生在年中

2.）我喜欢的解决方案是保留顺序比例，但使用自定义格式化程序：

 var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    // show every other label
    .tickFormat(function(d,i){
      if (i % 2) return d;
      else return null;
    }); 

下面是第二种方法的示例：

.酒吧{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}
var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=500-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.1格式（函数（d，i）{
如果（i%2）返回d；
否则返回null；
});
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.勾号（10，“%”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[{
“信”：“1970年”，
“频率”：0.08167
}, {
“信”：“1971年”，
“频率”：0.01492
}, {
“信”：“1972年”，
“频率”：0.02782
}, {
“信”：“1973年”，
“频率”：0.04253
}, {
“信”：“1974年”，
“频率”：0.12702
}, {
“信”：“1975年”，
“频率”：0.02288
}, {
“信”：“1976年”，
“频率”：0.02015
}, {
“信”：“1977年”，
“频率”：0.06094
}, {
“信”：“1978年”，
“频率”：0.06966
}, {
“信”：“1979年”，
“频率”：0.00153
}, {
“信”：“1980年”，
“频率”：0.00772
}, {
“信”：“1981年”，
“频率”：0.04025
}, {
“信”：“1982”，
“频率”：0.02406
}, {
“信”：“1983年”，
“频率”：0.06749
}, {
“信”：“1984年”，
“频率”：0.07507
}, {
“信”：“1985年”，
“频率”：0.01929
}, {
“信”：“1986年”，
“频率”：0.00095
}, {
“信”：“1987年”，
“频率”：0.05987
}, {
“信”：“1988年”，
“频率”：0.06327
}, {
“信”：“1989年”，
“频率”：0.09056
}, {
“信”：“1990年”，
“频率”：0.02758
}, {
“信”：“1991年”，
“频率”：0.00978
}, {
“信”：“1992年”，
“频率”：0.0236
}, {
“信”：“1993年”，
“频率”：0.0015
}, {
“信”：“1994年”，
“频率”：0.01974
}, {
“信”：“1995年”，
“频率”：0.00074
}];
x、 域（data.map）（函数（d）{
回信；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.frequency；
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d.letter）；
})
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{
返回y（d.频率）；
})
.attr（“高度”，功能（d）{
返回高度-y（d.频率）；
});
功能类型（d）{
d、 频率=+d.频率；
返回d；
}

在此处耦合选项

1.）您可以保留日期时间轴，但将日期+1.577e+10毫秒（6个月）移动，使其发生在年中

2.）我喜欢的解决方案是保留顺序比例，但使用自定义格式化程序：

 var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    // show every other label
    .tickFormat(function(d,i){
      if (i % 2) return d;
      else return null;
    }); 

下面是第二种方法的示例：

.酒吧{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}
var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=500-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.1格式（函数（d，i）{