Javascript D3轴重叠

所以问题是X轴的标签重叠，Mon 31和November。 据我所见，这两个日期的轴之间的间距较小，因此标签重叠。
我能解决这个问题吗？还是图书馆的问题

在使用该图表的项目中，有开始日期和结束日期的日期选择器，还有日期粒度（每日、每月、每年）的下拉列表，这意味着我不能使用固定数量的刻度和特定格式

.ticks(15)

在这里只用于演示，在项目中是这样的

Math.min(data.length, Math.floor(width / 100)) // 100 being the 'min' tick width

---

许多解决方案中有一种是专门设置勾号格式

.tickFormat(function(d) {
    return d3.timeFormat("%b %d")(d)
})

以及传播蜱虫，例如使用

timeDay

：

.ticks(d3.timeDay.every(4))

以下是您的代码和这些更改：

var数据=[{
“日期”：“2016-09-30”，
“工作”：0，
}, {
“日期”：“2016-10-01”，
“工作”：0，
}, {
“日期”：“2016-10-02”，
"工作":一,，
}, {
“日期”：“2016-10-03”，
“工作”：0，
}, {
“日期”：“2016-10-04”，
"工作":三,，
}, {
“日期”：“2016-10-05”，
“工作”：0，
}, {
“日期”：“2016-10-06”，
"工作":二,，
}, {
“日期”：“2016-10-07”，
“工作”：0，
}, {
“日期”：“2016-10-08”，
“工作”：0，
}, {
“日期”：“2016-10-09”，
“工作”：4，
}, {
“日期”：“2016-10-10”，
“工作”：6，
}, {
“日期”：“2016年10月11日”，
"工作":一,，
}, {
“日期”：“2016年10月12日”，
"工作":二,，
}, {
“日期”：“2016-10-13”，
“工作”：0，
}, {
“日期”：“2016-10-14”，
“工作”：0，
}, {
“日期”：“2016-10-15”，
“工作”：0，
}, {
“日期”：“2016年10月16日”，
"工作":三,，
}, {
“日期”：“2016-10-17”，
"工作":二,，
}, {
“日期”：“2016-10-18”，
"工作":三,，
}, {
“日期”：“2016-10-19”，
"工作":三,，
}, {
“日期”：“2016-10-20”，
"工作":一,，
}, {
“日期”：“2016-10-21”，
“工作”：0，
}, {
“日期”：“2016-10-22”，
“工作”：0，
}, {
“日期”：“2016-10-23”，
“工作”：4，
}, {
“日期”：“2016-10-24”，
"工作":二,，
}, {
“日期”：“2016-10-25”，
“工作”：6，
}, {
“日期”：“2016-10-26”，
"工作":一,，
}, {
“日期”：“2016-10-27”，
"工作":一,，
}, {
“日期”：“2016-10-28”，
“工作”：0，
}, {
“日期”：“2016-10-29”，
"工作":三,，
}, {
“日期”：“2016-10-30”，
“工作”：5，
}, {
“日期”：“2016年10月31日”，
“工作”：0，
}, {
“日期”：“2016-11-01”，
"工作":三,，
}, {
“日期”：“2016-11-02”，
"工作":一,，
}, {
“日期”：“2016-11-03”，
“工作”：0，
}, {
“日期”：“2016-11-04”，
“工作”：0，
}, {
“日期”：“2016-11-05”，
"工作":一,，
}, {
“日期”：“2016-11-06”，
“工作”：4，
}, {
“日期”：“2016-11-07”，
“工作”：5，
}, {
“日期”：“2016-11-08”，
“工作”：6，
}, {
“日期”：“2016-11-09”，
"工作":二,，
}, {
“日期”：“2016-11-10”，
"工作":一,，
}, {
“日期”：“2016-11-11”，
“工作”：0，
}, {
“日期”：“2016-11-12”，
"工作":二,，
}, {
“日期”：“2016-11-13”，
"工作":二,，
}, {
“日期”：“2016-11-14”，
"工作":一,，
}, {
“日期”：“2016-11-15”，
"工作":三,，
}, {
“日期”：“2016年11月16日”，
“工作”：0，
}, {
“日期”：“2016-11-17”，
"工作":一,，
}, {
“日期”：“2016-11-18”，
“工作”：0，
}, {
“日期”：“2016-11-19”，
“工作”：0，
}, {
“日期”：“2016-11-20”，
"工作":一,，
}, {
“日期”：“2016-11-21”，
"工作":二,，
}, {
“日期”：“2016-11-22”，
"工作":二,，
}, {
“日期”：“2016-11-23”，
“工作”：4，
}, {
“日期”：“2016-11-24”，
“工作”：0，
}, {
“日期”：“2016-11-25”，
“工作”：0，
}]
var parseTime=d3.timeParse（“%Y-%m-%d”）；
data.forEach（函数（d）{
d、 日期=解析时间（d.日期）；
});
var svg=d3。选择（“svg”），
保证金={
前20名，
右:20,，
底数：50，
左：50
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var x=d3.scaleTime（）
.rangeRound（[0，宽度]）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var line=d3.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.Jobs）；
});
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
y、 域（d3）。范围（数据，函数（d）{
返回d.工作；
}));
var xAxis=d3.axisBottom（x）
.滴答声（d3.时间日。每（4）次）
.d格式（函数（d）{
返回d3.timeFormat（“%b%d”）（d）
})
.tickSizeInner（25）
g、 附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.select（“.domain”）
.remove（）；
g、 附加（“g”）
.呼叫（d3.左（y））
.append（“文本”）
.attr（“填充”、“千”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.71em”）
.attr（“文本锚定”、“结束”）
.文本（“工作”）；
g、 附加（“路径”）
.基准（数据）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“笔划宽度”，1.5）
.attr（“d”，行）
或者您可以将标签旋转90度：

d3.selectAll(".x-axis .tick text")
  .attr("transform", "translate(-30, 50)rotate(-90)")

工作代码
可以工作，但是项目中的图表有开始日期和结束日期的日期选择器，还有一个日期粒度下拉列表，这意味着我不能将其限制为一定数量的刻度或标签格式。不幸的是，设计要求它们排成一行：）谢谢您的建议。Ok np对正在寻找的人很有帮助类似的。
d3.selectAll(".x-axis .tick text")
  .attr("transform", "translate(-30, 50)rotate(-90)")