Javascript 轴上的timeMonth显示每个日期，而不是每个月

我是D3新手，几天来我一直在尝试解决这个问题，但运气不好。我不知道下一步该试什么

我有一个包含每日数据的JSON数据集，我正在尝试制作一个每天包含一个条形图的条形图。那很好。但是，

x

-轴有问题。我希望

x

-轴仅在每个月的第一天有刻度和标签。就好像

d3。timeMonth

认为每个数据点都是一个新的月份：

我将

x

-轴设置为

scaleBand

，因为每次我尝试将其设置为

scaleTime

，这些条都显示为巨大的重叠条。然而，就在我设置

x

-轴之前，我已经将数据打印到控制台日志中，并且它看起来格式正确，如日期

const数据=[
{
日期：2020-08-31，
出版：2，
未发布：0，
},
{
日期：2020-09-01，
已出版：0，
未发布：0，
},
{
日期：2020-09-02，
出版:1,，
未发布：0，
},
{
日期：2020-09-03，
出版:1,，
未发布：0，
},
{
日期：2020-09-04，
已出版：0，
未发布：0，
},
{
日期：2020-09-05，
已出版：0，
未发布：0，
},
];
//设置图形的尺寸和边距
var保证金={
前10名，
右:30,，
底部：80，
左：40
},
宽度=450-边距。左侧-边距。右侧，
高度=350-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3。选择（“图形”）
.append（“svg”）
.attr（“视图框”，“0 0 450 350”）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//解析日期/时间
var parseTime=d3.timeParse（“%Y-%m-%d”）；
//格式化数据
data.forEach（函数（d）{
d、 日期面=解析时间（d.日期面）；
d、 已出版=+d.已出版；
});
//整理数据
数据排序（函数（a，b）{
返回a[“日期面”]-b[“日期面”]；
})
//X轴
var x=d3.scaleBand（）
.范围（[0，宽度]）
.domain（data.map）（函数（d）{
返回d.date\u面；
}))
.填充（0.2）；
//Y轴
变量y=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[0，d3.max（数据，函数（d））{
返回Math.max（d.published）；
}) + 4]);
//添加X轴、记号和标签
svg.append（“g”）
.attr（“类”、“次轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x）
.滴答声（d3.时间月。每（1）次）
.tickFormat（d3.timeFormat（“%b”））
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“.15em”）
.attr（“变换”、“旋转（-45）”）；
svg.append（“g”）
.调用（d3.左（y））；
//栅栏
svg.selectAll（“mybar”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{
返回x（d.date_面）；
})
.attr（“宽度”，x.带宽（））
.attr（“高度”，功能（d）{
返回高度-y（d.d）；
})
.attr（“y”，函数（d）{
返回y（d.已发布）；
})

---

因为使用了

缩放键

，所以所有值都被认为是分类的。我的意思是，它们就像标签，像“球”、“橙色”、“圆圈”。只是术语，彼此完全无关。这与时间或数字形成对比，在时间或数字中，可以说一个值大于另一个值，或者说一个值更接近A而不是B

将值改为

scaleTime

：

const数据=[
{
日期：2020-08-31，
出版：2，
未发布：0，
},
{
日期：2020-09-01，
已出版：0，
未发布：0，
},
{
日期：2020-09-02，
出版:1,，
未发布：0，
},
{
日期：2020-09-03，
出版:1,，
未发布：0，
},
{
日期：2020-09-04，
已出版：0，
未发布：0，
},
{
日期：2020-09-05，
已出版：0，
未发布：0，
},
];
//设置图形的尺寸和边距
var保证金={
前10名，
右:30,，
底部：80，
左：40
},
宽度=450-边距。左侧-边距。右侧，
高度=350-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3。选择（“图形”）
.append（“svg”）
.attr（“视图框”，“0 0 450 350”）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//解析日期/时间
var parseTime=d3.timeParse（“%Y-%m-%d”）；
//格式化数据
data.forEach（函数（d）{
d、 日期面=解析时间（d.日期面）；
d、 已出版=+d.已出版；
});
//整理数据
数据排序（函数（a，b）{
返回a[“日期面”]-b[“日期面”]；
})
//将每侧的区域延长12小时，以考虑钢筋宽度
var xDomain=d3.extent（data.map）（函数（d）{
返回d.date\u面；
}));
//深度复制日期对象以确保可以进行安全修改
xDomain=[新日期（xDomain[0]），新日期（xDomain[1]）；
xDomain[0].setHours（xDomain[0].getHours（）-12）；
xDomain[1].setHours（xDomain[1].getHours（）+12）；
//X轴
var x=d3.scaleTime（）
.范围（[0，宽度]）
.域（xDomain）；
var xDomainInDays=（x.domain（）[1]-x.domain（）[0]）/（1000*60*60*24）；
变量xBarWidth=宽度/xDomainInDays；
var=0.2；
//Y轴
变量y=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[0，d3.max（数据，函数（d））{
返回Math.max（d.published）；
}) + 4]);
//添加X轴、记号和标签
svg.append（“g”）
.attr（“类”、“次轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x）
.滴答声（d3.时间月。每（1）次）
.tickFormat（d3.timeFormat（“%b”））
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“.15em”）
.attr（“变换”、“旋转（-45）”）；
svg.append（“g”）
.调用（d3.左（y））；
//栅栏
svg.selectAll（“mybar”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{
//得到x坐标