CODEWITHSUNDEEP
javascriptd3.js
will
will

Reputation: 689

Uncaught TypeError: Cannot read property 'curve' of undefined in D3.js

I am trying to translate a block of D3 v4 code over to v3. Here is the block of code that is giving me trouble.

//var spiral = d3.radialLine()
var spiral = d3.svg.line.radial() 
  //.curve(d3.curveCardinal)
  .curve(d3.line.curve())
  //.curve(d3.curve.linear) 
  .angle(theta)
  .radius(radius);

The first line I commented out referencing the radialLine I was able to get around, however, when trying to translate d3.curveCardinal to d3.line.curve() I get the following error:

Uncaught TypeError: Cannot read property 'curve' of undefined

I tried a few derivatives of d3.line.curve() but to no avail. Does anyone know a way I can translate this successfully?

Upvotes: 0

Views: 647

Answers (1)

altocumulus
altocumulus

Reputation: 21578

Quoting the changelog:

The line.interpolate and area.interpolate methods have been replaced with line.curve and area.curve. Curves are implemented using the curve interface rather than as a function that returns an SVG path data string

For your backport this means to replace 

.curve(d3.curveCardinal)

with

.interpolate("cardinal")

The whole statement thus becomes:

var spiral = d3.svg.line.radial() 
  .interpolate("cardinal")
  .angle(theta)
  .radius(radius);

The v3 API docs have all the details on the correct usage of d3.svg.line.radial() and its interpolation modes.

Upvotes: 1

Related Questions