question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"arrow-end" throw an Error: <path> attribute d: Expected number, “….68028259277344CNaN,NaN,NaN,NaN,…”

See original GitHub issue

Library: “raphael”: “^2.2.8”

Summary: all work as expected apart from the console error

Description: I want to render a line with an arrow end, but when adding “arrow-end” attribute, it throw an Error: "attribute d: Expected number, “….68028259277344CNaN,NaN,NaN,NaN,…”. weirdly when adding “arrow-start” attribute there is no error

I tried already to change the stroke-width, it didn’t help

This is the code: http://jsfiddle.net/fzjc81ym/ (don’t see an error in console through the js fiddle, only in my repository)

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);

    });
}

image

Any idea how to solve that error?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:14

github_iconTop GitHub Comments

3reactions
ibrierleycommented, Jan 24, 2021

Tbh I can’t think of a very non-hacky way of getting around it (eg having a separate arrow end that’s transformed or something). At this point, I’d consider moving to Snap (it’s pretty compatibly with Raph), although it doesn’t include arrow ends as default (there are examples out there, eg below), it’s a lot more flexible (you can call functions every frame to build an animation).

Example http://jsfiddle.net/4cvaM/9/

1reaction
ibrierleycommented, Jan 24, 2021

Interesting, looks a bit more fiddly than I thought. Seems to happen with a combo of ‘arrow-end’ and ‘stroke-width’, I’m guessing Raph adds those behind the scenes and tries to animate them even if not included in the exact animate call, causing the issue. Will have a ponder.

On Sun, Jan 24, 2021 at 10:41 AM Hadas Maimon notifications@github.com wrote:

yes, exactly. thanks for the answer!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/DmitryBaranovskiy/raphael/issues/1128#issuecomment-766326066, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA5YN5ODMA5BIKHTVI4TMJDS3P2MBANCNFSM4WKYKV6Q .

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error: <path> attribute d: Expected number, "MNaN,NaNLNaN ...
The root of your problem is that the value d in your anonymous function passed to dataNest.forEach still contains one level of nesting...
Read more >
Error: <path> attribute d: Expected number ... - Google Groups
My chart is working at the first time and the error gets randomly when I redraw the chart. The error is "Error: <path>...
Read more >
LineChart domain error: <path> attribute d: Expected number ...
When the domain prop is given incorrectly to a LineChart (I just cannot figure it out), it throws Error: attribute d: Expected number, ......
Read more >
Error: <path> attribute d: Expected number, "MZ" - Bug reports
I'm receiving this error on just one metabase iframe. I don't know why. It's a line chart with a single line. In the...
Read more >
I have an error with my SVG chart: attribute d - Expected number
Can you tell me what this error means? Error: <path> attribute d: Expected number, "?.69266055045871 null L64.9235474?". RGraph.svg.common ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found