The following code generates a path from data.

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 curvy path defined by the data draws correctly.

Fails here getTotalLength() is not defined:

var totalLength = path.getTotalLength();

Additionally getPointAlongLength() is not defined either:

var point = path.getPointAtLength(position);

The following code generates a path from data.

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 curvy path defined by the data draws correctly.

Fails here getTotalLength() is not defined:

var totalLength = path.getTotalLength();

Additionally getPointAlongLength() is not defined either:

var point = path.getPointAtLength(position);

• javascript
• d3.js
• svg

2 Answers 2

Instead of:

var totalLength = path.getTotalLength();

It has to be:

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

getTotalLength() works on the node, but path is a D3 selection, not the DOM element itself. So, you have to use path.node().

yes, I discovered I had to use path.node() to get the right object. The d3.js documentation is extremely hard to read, with few examples.