I defined the path in d3.js, it draws correctly, but .getTotalLength () is undefined

Question

The following code generates a data path.

var path = gameBoard.append('path')
   .attr("id", "snake" + snakeIndex)
   .attr("d", interpolator(data))
   .attr('stroke-width', snakeStroke)
   .attr('fill', 'none')
   .attr('stroke', config.snakeColor);

The healing path defined by the data is drawn correctly.

Failure here getTotalLength () is undefined:

var totalLength = path.getTotalLength();

Additionally, getPointAlongLength () is also not defined:

var point = path.getPointAtLength(position);

Answer 1

Instead:

var totalLength = path.getTotalLength();

It should be:

var totalLength = path.node().getTotalLength();

getTotalLength()works with node, but it pathis an array of nodes, not node itself. So you should use path.node()or path[0][0].

Answer 2

yes, I found that I had to use path.node () to get the desired object. The d3.js documentation is very hard to read, with a few examples.