d3.svg.line() error: Uncaught TypeError: Cannot read property 'line' of undefined

Question

I am using the following code to try to draw a path using d3.js I have tried various code examples on the web about the same and have been getting the same error everywhere.

Answer 1

Reading your comment I suppose you are using D3 v4. As of version 4 there is no d3.svg, hence the error message. The line generator you are looking for is now defined as d3.line().

If you were still using version 3, it would be d3.svg.line() instead.

---

Also, as other answerers have noted, this will lead to a follow-up error when leaving the rest of the statement untouched as d3.line does not feature a method .interpolate(). D3 v4 has curve factories for this purpose, which are used for interpolation. These factories are supplied to the line generator using line.curve(). D3 v3's .interpolate("linear") now becomes .curve(d3.curveLinear). However, since line.curve() defaults to d3.curveLinear this can safely be omitted in your case.

The statement thus becomes:

var lineFunction = d3.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .curve(d3.curveLinear);          // Use for clarity, omit for brevity.

Answer 2

[Update]

Also, if you are using D3js v4, a problem with this statement .interpolate("linear"); will occur with this warning:

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

In this new version, .interpolate("linear"); should be changed to:

curve(d3.curveLinear);

As in the description of curveLinear.

Answer 3

Make sure your code has modified in the below syntax since there is no d3.svg in version 4.

var lineFunction = d3.line()
                     .x(function(d) { return d.x; })
                     .y(function(d) { return d.y; });