CODEWITHSUNDEEP
javascriptd3.js
Arihant
Arihant

Reputation: 4047

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

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.

Following is the JS: 

<script type="text/javascript">
    var svg;
    //The data for our line
 lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                 { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                 { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg:svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");
    </script>

The error is: Uncaught TypeError: Cannot read property 'line' of undefined

This comes at the following line: var lineFunction = d3.svg.line()

I am not sure what 'undefined' means here. Any leads?

Upvotes: 32

Views: 36368

Answers (3)

altocumulus
altocumulus

Reputation: 21578

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.

Upvotes: 86

Huyen
Huyen

Reputation: 533

[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.

Upvotes: 3

user6869331
user6869331

Reputation:

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

Upvotes: 5

Related Questions