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);
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With