Reactjs 在d3折线图中，如果日期是月份的最后一天，则无法看到月份名称

我正在使用react，d3图表生成折线图。我使用d3.min和d3.max生成x轴和y轴的最小值和最大值。xAxis的所有数据都是字符串格式的，比如说“2017-12-31”，我使用timeparse将字符串解析为日期格式，并将其传递给x轴

现在X轴刻度显示为1月、2月、3月

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3Axis.axisBottom(x).tickFormat(d3Time.timeFormat("%b")))

现在，当xAxis的最小值是一个月的最后一天时，它并没有出现在xAxis的刻度中

例如，如果最小值为“2018-07-01”，则轴刻度将显示“7月、8月、9月、10月”

但如果最小值为“2018-07-31”，则轴刻度将显示“8月、9月、10月”

数据的格式应确保之前所有月份的日期均显示为当月的最后一个月

ex: [{date: '2018-07-31', value: 10}, 
     {date: '2018-08-31', value: 10},
     {date: '2018-09-30', value: 10},
     {date: '2018-10-31', value: 10}]

即使最小值是该月的最后一个月，也可以显示月份名称。

是本例中要查找的内容

引用文件：

此方法通常会修改比例的域，并且只能将边界扩展到最近的舍入值。如果域是根据数据计算的（比如使用范围），则Nicing是有用的，并且可能是不规则的

不使用

nice

方法的示例

var数据=[{date:'2018-07-31'，值：10}，
{日期：'2018-08-31'，值：10}，
{日期：'2018-09-30'，值：10}，
{日期：'2018-10-31'，数值：10}]；
var parseTime=d3.timeParse（“%Y-%m-%d”）；
data.forEach（函数（d）{
d、 日期=解析时间（d.日期）；
});
var svg=d3.select（'body'）。append（'svg'）。attr（'width'，500）。attr（'height'，400）；
var gAxis=svg.append（'g'）.classed（'x轴'，true）；
var xScale=d3.scaleTime（）.domain（d3.extent（data，d=>d.date））.range（[10490]）；
var xAxis=d3.axisBottom（xScale.tickFormat（d3.timeFormat（“%b”））；
gAxis.call（xAxis）