Migrating from D3.js V3 to V4 (and beyond) Error on svg.append

I am just starting to learn D3, and have been following a tutorial to create this piece of code.

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

Using V3 this code is perfect, so now, step by step I try to migrate to the current version. Now I am stuck over here:

  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");
}

Using this tutorial: https://kristinhenry.medium.com/migrating-to-version-4-of-d3-part1-6a5e83ce8e31 I’m changing my code. But I end up with an error "n.range is not a function". Seems to be triggered by the .call(d3.axisBottom(xAxis)) line

Or is the problem created in the previous funtion:

 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]);

What am I doing wrong?

51 thoughts on “Migrating from D3.js V3 to V4 (and beyond) Error on svg.append”