Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);
like image 552
GeeWhizBang Avatar asked Sep 13 '16 19:09

GeeWhizBang


2 Answers

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().

like image 138
Gerardo Furtado Avatar answered Oct 15 '22 18:10

Gerardo Furtado


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.

like image 43
GeeWhizBang Avatar answered Oct 15 '22 18:10

GeeWhizBang