Javascript d3.scaleTime 1890到1910之间的日期显示为：00（d3.v4）

我正在使用我在这里找到的一个示例在d3中创建一个线条图->

我的数据包含从1890年到2018年的观察结果，格式如下：

1880-01-01,1
1890-01-01,3
1890-02-02,1
1890-02-17,1
1890-03-29,1
1890-04-04,1
1890-05-04,1
1890-06-02,1
1890-06-05,1
1890-06-11,1
1890-07-01,1
1890-10-28,1
1890-12-24,1
1890-12-25,1
1891-01-29,1
1891-03-03,1
1891-06-07,1
1892-05-09,1
1893-08-20,1
1893-10-06,1
1894-03-28,1
1895-10-17,1
1896-05-25,1
1897-02-05,1
1897-07-29,1
1897-08-26,1
1898-07-05,1
1900-01-01,1
1900-08-12,1
1901-09-21,1
1903-08-16,1
1903-09-23,1
1904-02-13,1
1904-09-02,1
1904-09-04,1
1905-05-08,1
1905-07-06,1
1905-11-19,1
1906-09-24,1
1908-02-03,1
1909-01-01,1
1910-09-26,1 

我注意到，x轴比例使用以下记号渲染1890到1910年之间的日期：00

而不是1890、1900、1910年

原始图表代码给出以下行以设置

    // Add X axis --> it is a date format
    var x = d3.scaleTime()
    //.domain(d3.extent(data, function(d) { return d.date; }))// original line
      .domain([new Date(1880, 0, 1), new Date(2018, 0, 1)]) // debugline
      .range([ 0, width ]);
    xAxis = svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

d3.v5做到了这一点。略有不同

const xScale = d3.scaleTime().range([0,width]);
const yScale = d3.scaleLinear().rangeRound([height, 0]);
xScale.domain(d3.extent(data, function(d){
    return timeConv(d.date)}));
yScale.domain([(0), d3.max(slices, function(c) {
    return d3.max(c.values, function(d) {
        return d.measurement + 4; });
        })
    ]);

我无法找出问题所在，我在d3.v5中尝试了相同的数据，但无法重现问题。我想知道不同类型是否需要一些额外的解析

谢谢 乔纳森

已请求PS完整代码（从d3库复制并粘贴）

//设置图形的尺寸和边距
var margin={顶部：50，右侧：30，底部：30，左侧：60}，
宽度=900-边距。左侧-边距。右侧，
高度=600-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//读取数据
d3.csv（“所有案例.csv”，
//读取csv时，我必须格式化变量：
职能（d）{
返回{date:d3.timeParse（“%Y-%m-%d”）（d.date），值：d.value}
},
//现在我可以使用此数据集：
功能（数据）{
//添加X轴-->它是一种日期格式
var x=d3.scaleTime（）
//.domain（d3.extent（数据，函数（d）{返回d.date；}））
.domain（[新日期（1880,0,1），新日期（2018,0,1）]）
.范围（[0，宽度]）；
xAxis=svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
变量y=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d）{return+d.value；}）+5]）
.范围（[高度，0]）；
yAxis=svg.append（“g”）
.调用（d3.左（y））；
//添加剪贴画：此区域之外的所有内容都不会被绘制。
var clip=svg.append（“defs”）.append（“svg:clipPath”）
.attr（“id”、“剪辑”）
.append（“svg:rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“x”，0）
.attr（“y”，0）；
//加刷
var brush=d3.brushX（）//使用d3.brush函数添加笔刷功能
.extent（[[0,0]，[width，height]]）//初始化画笔区域：从0,0开始，到width，height结束：这意味着我选择了整个图形区域
.on（“end”，updateChart）//每次笔刷选择更改时，触发“updateChart”函数
//创建线条变量：线条和画笔同时出现的位置
var line=svg.append（'g'）
.attr（“剪辑路径”、“url（#剪辑）”）
//添加行
行。追加（“路径”）
.基准（数据）
.attr（“class”，“line”）//我添加了类行以便以后能够修改这一行。
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”，1.5）
.attr（“d”，d3.line（）
.x（函数（d）{返回x（d.date）}）
.y（函数（d）{返回y（d.value）}）
)
//加刷子
线
.附加（“g”）
.attr（“类”、“刷”）
.打电话（刷子）；
//将idleTimeOut设置为null的函数
var idleTimeout
函数idled（）{idleTimeout=null；}
//为给定边界更新图表的函数
函数updateChart（）{
//选定的边界是什么？
范围=d3.event.selection
//如果没有选择，返回初始坐标。否则，更新X轴域
如果（！范围）{
如果（！idleTimeout）返回idleTimeout=setTimeout（idled，350）；//这允许稍等一会儿
x、 域（[4,8]）
}否则{
x、 域（[x.invert（范围[0]），x.invert（范围[1]））
line.select（“.brush”）.call（brush.move，null）//这将在完成选择后立即删除灰色笔刷区域
}
//更新轴和线位置
xAxis.transition（）.duration（1000）.call（d3.axisBottom（x））
线
.选择（“.line”）
.transition（）
.持续时间（1000）
.attr（“d”，d3.line（）
.x（函数（d）{返回x（d.date）}）
.y（函数（d）{返回y（d.value）}）
)
}
//如果用户双击，请重新初始化图表
on（“dblclick”，function（））{
x、 域（d3.extent（数据，函数（d）{返回d.date；}））
xAxis.transition（）.call（d3.axisBottom（x））
线
.选择（“.line”）
.transition（）
.attr（“d”，d3.line（）
.x（函数（d）{返回x（d.date）}）
.y（函数（d）{返回y（d.value）}）
)
});
})
svg.append（“文本”）
.attr（“x”，400）
.attr（“y”，-5）
.attr（“文本锚定”、“中间”）
.style（“字体大小”、“16px”）
.style（“文本装饰”、“实体”）
.文本（“1890-2018年”）；

您使用的是D3 v4，axis与D3 v5配合使用：

<script src="https://d3js.org/d3.v4.min.js"></script>

---

你能发布一个完整的代码示例吗？我已经添加了完整的代码

<script src="https://d3js.org/d3.v4.min.js"></script>

d3.csv("all_cases.csv",
  function(d){
    return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
  })
.then(function(data) {
  // code
})