Error: <tspan> attribute dy: Expected length, "NaN". | Error: <path> attribute d: Expected number, "M,0,0". | Raphael.js | wheelnav.js

Question

I am trying to create circular menu with wheelnav.js library.
Even though it seems to work I get thousands of errors in chrome console.

Error: attribute d: Expected number, "M,0,0".
Error: attribute dy: Expected length, "NaN".

During my own debugging I managed to find the same causes that people list in these threads:

https://github.com/DmitryBaranovskiy/raphael/issues/593
https://github.com/DmitryBaranovskiy/raphael/issues/620
https://github.com/fperucic/treant-js/issues/73

Even though these threads are quite old, they are still opened and I couldn't find there soulution to my problem. I couldn't even find an elegant method to overwrite raphaels' functions.

 var icons = {
    'section_sign': '\u00A7\n',
    'key': '\uf084\n',
    'cogs': '\uf085\n',
 };

var items = [ {title: icons.key + 'Security&\nPasswords'},
              {title: icons.cogs + 'Settings&\nDevice'},
              {title: icons.section_sign + 'Rules&\nLaw'} ];

var piemenu = new wheelnav('main_menu');
piemenu.initWheel(items.map(function(item){
                                        return item.title;
                                    }));
piemenu.createWheel();

JSFiddle

Any ideas?

Thanks for help :)

Answer 1

wheelnav.js uses a modified Raphael.js

https://cdn.jsdelivr.net/npm/[email protected]/js/dist/raphael.min.js

Here is an error-free JSFiddle: https://jsfiddle.net/npg80xqm

You can find the fixed bugs here: https://github.com/softwaretailoring/wheelnav/commits/master/js/required/raphael.js

Answer 2

A kind of solution was already in the issue https://github.com/DmitryBaranovskiy/raphael/issues/593 . So I found the following bodge by adding:

if(isNaN(fontSize)) {
    fontSize = 10;
}

to raphael.js after:

fontSize = node.firstChild ? toInt(R._g.doc.defaultView.getComputedStyle(node.firstChild, E).getPropertyValue("font-size"), 10) : 10;

(line 6147 in 2.3.0) solved the <tspan> errors for me.