从 D3.js V3 迁移到 V4（及更高版本）svg.append 上的错误

Question

我刚刚开始学习 D3，并且一直在按照教程创建这段代码。

https://codepen.io/jey/details/jmClJ

使用 V3 这段代码是完美的，所以现在，我尝试逐步迁移到当前版本。 现在我被困在这里：

  var xAxis = d3.axisBottom()
.scale(timeScale)
//  .orient('bottom')
.ticks(d3.timeDays, 100)
.tickSize(-h+theTopPad+20, 0, 0)
.tickFormat(d3.timeFormat('%d %b %y'));

var grid = svg.append('g')
.attr('class', 'grid')
.attr('transform', 'translate(' +theSidePad + ', ' + (h - 50) + ')')
.call(d3.axisBottom(xAxis))
//  .call(xAxis)
.selectAll("text")  
        .style("text-anchor", "middle")
        .attr("fill", "#000")
        .attr("stroke", "none")
        .attr("font-size", 10)
        .attr("dy", "1em");
}

使用本教程： https://kristinhenry.medium.com/migrating-to-version-4-of-d3-part1-6a5e83ce8e31我正在更改我的代码。 但我最终得到一个错误“n.range 不是一个函数”。 似乎是由.call(d3.axisBottom(xAxis)) 行触发的

或者是在以前的功能中产生的问题：

 var dateFormat = d3.timeFormat("%Y-%m-%d"); 

 timeScale = d3.scaleTime()
.domain([d3.min(taskArray, function(d) {return dateFormat(d.startTime);}),
          d3.max(taskArray, function(d) {return dateFormat(d.endTime);})])
.range([0,w-160]);

我究竟做错了什么？

Answer 1

确实，“parseTime”确实起到了作用，还有一些其他的小改动。 现在这是我的代码：

var parseTime = d3.timeParse("%Y-%m-%d");

timeScale = d3.scaleTime()
.domain([d3.min(taskArray, function(d) {return parseTime(d.startTime);}),
          d3.max(taskArray, function(d) {return parseTime(d.endTime);})])
.range([0,w-160]);

var xAxis = d3.axisBottom()
.scale(timeScale)
.ticks(d3.timeDays, 100)
.tickSize(-h+theTopPad+20, 0, 0)
.tickFormat(d3.timeFormat('%d %b %y'));


 var grid = svg.append('g')
.attr('class', 'grid')
.attr('transform', 'translate(' +theSidePad + ', ' + (h - 50) + ')')
.call(d3.axisBottom(timeScale))
.selectAll("text")  
        .style("text-anchor", "middle")
        .attr("fill", "#000")
        .attr("stroke", "none")
        .attr("font-size", 10)
        .attr("dy", "1em");
}

再次感谢安德鲁