React js, Raphael: canvas throw an Error: <path> attribute d: Expected number, "….68028259277344CNaN,NaN,NaN,NaN,…"

Question

Framwork: React js.

Library: "raphael": "^2.2.8",

Description: canvas throw an Error: attribute d: Expected number, "….68028259277344CNaN,NaN,NaN,NaN,…".

console errors screenshot

http://jsfiddle.net/fzjc81ym/

this.canvas = Raphael('grid', '100%', '100%');

drawLine(this.canvas, path1, duration, arrowAtrr, color, strokeDasharray, strokeWidth, arrowend).then(() => this.resolve(item, callback))

const drawLine = (canvas, pathStr, duration = 1000, attr = arrowAtrr, color = Color.GREEN, strokeDasharray = '-', strokeWidth = 4, arrowend = "block-wide-long") => {
    return new Promise((resolve) => {
        attr.stroke = color;
        attr['stroke-dasharray'] = strokeDasharray;
        attr['stroke-width'] = strokeWidth;
        attr['arrow-end'] = arrowend
        var guidePath = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
        var path = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
        var totalLength = guidePath.getTotalLength(guidePath);
        var startTime = new Date().getTime();
        var intervalLength = 25;

        var intervalId = setInterval(function () {
            var elapsedTime = new Date().getTime() - startTime;
            var thisLength = elapsedTime / duration * totalLength;
            var subPathStr = guidePath.getSubpath(0, thisLength);
            attr.path = subPathStr;
            path.attr(attr)
            path.animate(attr, intervalLength);

            if (elapsedTime >= duration) {
                clearInterval(intervalId);
                resolve();
            }

        }, intervalLength);

    });
}

it seems to happen when I use the arrow-end attribute

I didn't find an answer in other places Maybe someone has any idea how to solve that error?

Answer 1

You didnt really include enough Information for your problem but this may help. https://www.npmjs.com/package/react-raphael

It looks like you need to call Raphael.Paper(width={300} height={300}) in order to set the width of a canvas.

Answer 2

A solutions: in my case, the arrow line was smaller than the arrow-end triangle, so I set the min size of the path to be 11 (the length of the arrow-end).

var subPathStr = guidePath.getSubpath(0, Math.max(11, thisLength));

here the around code:

var subPathStr = guidePath.getSubpath(0, Math.max(11, thisLength));
attr.path = subPathStr;
path.attr(attr)
path.animate(attr, intervalLength);