"Interpolate" is not a function

Question

I am new to D3 and experimenting on few charts . While building a line chart using D3 V4 , I came across following errors .

d3.line(...).x(...).y(...).interpolate is not a function

I assume this error is due to the function interpolate not being available in D3 v4 . It would be great if someone could help me with the replacement function for the interpolate function .

My code is in the below link

https://ghostbin.com/paste/ztans

Answer 1

In D3 v4.x, the line generator takes a curve to define the interpolation:

While lines are defined as a sequence of two-dimensional [x, y] points, and areas are similarly defined by a topline and a baseline, there remains the task of transforming this discrete representation into a continuous shape: i.e., how to interpolate between the points. A variety of curves are provided for this purpose [...] Curves are typically not constructed or used directly, instead being passed to line.curve and area.curve. (emphases mine)

So, this:

var lineFun = d3.line()     .x(function(d){return d.month*50})     .y(function(d){return height - (10* d.Sales)})     .interpolate("basis") 

Should be:

var lineFun = d3.line()     .x(function(d){return d.month*50})     .y(function(d){return height - (10* d.Sales)})     .curve(d3.curveBasis); 

Here is your code with that change:

var w = 700;  var height = 300;  var padding = 2;  var border = 2    var dataset=[5,7,2,6,1,10,8,9,11,13,16,40,15,20,25,35,36,25,28,18,17,4,22,5,3,35,46,57];    var monthlySales =[      {          "month":1,          "Sales":10      },      {          "month":2,          "Sales":25      },      {          "month":3,          "Sales":12      },      {          "month":4,          "Sales":16      },      {          "month":5,          "Sales":17      }      ];    onload();    function onload(){        var svg = d3.select("body")                  .append("svg")                  .attr("width",w)                  .attr("height",height)        svg.selectAll("rect")          .data(dataset)          .enter()          .append("rect")          .attrs({              x : function(d,i){                  return (i * (w/dataset.length)); },              y : function(d){ return (height- (d*4))},              width: (w/dataset.length)-padding,              height:function(d){ return(d*4); },              fill : function(d){return "rgb(0,"+(d*10)+",0)" ;}          });        svg.selectAll("text")          .data(dataset)          .enter()          .append("text")          .text(function(d){ return d})          .attrs({                x: function(d,i){ return (i * (w/dataset.length)) + ((((w/dataset.length) - padding)/2))},              y: function(d) {return (height-(d*4))},              "text-anchor" : "middle"          })          var lineFun = d3.line()          .x(function(d){return d.month*50})          .y(function(d){return height - (10* d.Sales)})          .curve(d3.curveBasis);          var svgLine = d3.select("body").append("svg")          .attr("width",w)          .attr("height",height);        var svgPath = svgLine.append("path")          .attrs({              d: lineFun(monthlySales),              "stroke": "purple",              "stroke-width":2,              "fill" :"none"          })        svgLine.selectAll("text")          .data(monthlySales)          .enter()          .append("text")          .text(function(d){return d.Sales})          .attrs({              x : function(d){return d.month*50 - 10},              y : function(d){return height-(10*d.Sales) + 10},              "font-size":"12px",              "fill" : "#666666",              "font-family":"sans-serif",              "dx":".35em",              "text-anchor":"start",              "font-weight": function(d,i){                  if(i==0 || i == monthlySales.length-1){                      return "bold"                  }                  else{                      return "normal"                  }              }          })        }

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