RGraph.svg.common.core.js:1906 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Jan Dirk on 14th April 2017
Hi Richard,

I've downloaded the RGraph.svg.common.core from www.rgraph.net/libraries/RGraph.svg.common.core.js
(See www.rgraph.net/forum/message.html/gradient-colors-are-gone-after-redraw-20170413084259.html)

I now get the error

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
     at Object.RG.SVG.text (www.rgraph.net/libraries/RGraph.svg.common.core.js:1906:21)
     at RG.SVG.HBar.drawLabelsAbove (www.rgraph.net/libraries/RGraph.svg.hbar.js:1061:39)
     at RG.SVG.HBar.draw (www.rgraph.net/libraries/RGraph.svg.hbar.js:421:18)
     at window.onload (file:///.../issue3.html:19:73)
RG.SVG.text @ RGraph.svg.common.core.js:1906
drawLabelsAbove @ RGraph.svg.hbar.js:1061
draw @ RGraph.svg.hbar.js:421
window.onload @ issue3.html:19

This is reproducible using the following reproduction case:

<html>
   <head>
     <title>Reproduction case</title>
     <script src="www.rgraph.net/libraries/RGraph.svg.common.core.js\"></script>
     <script src="www.rgraph.net/libraries/RGraph.svg.common.tooltips.js\"></script>
     <script src="www.rgraph.net/libraries/RGraph.svg.hbar.js\"></script>

     <script type="text/javascript">
       window.onload = function()
       {
         var data=[1,2,5,3,4];
         var tooltips=[1,2,5,3,4];
         var options = { tooltips , labelsAbove: true, min: 0, max: 5, gutterRight: 1} ;
         (new RGraph.SVG.HBar({id: "g1", data: data, options: options})).draw();
       }
     </script>
   </head>
   <body>
     <div>
       <div id="g1" style="width: 400px; height: 200px; background-color: #eee;" />
     </div>
   </body>
</html>

The error comes from the function RG.SVG.text in RGraph.svg.common.core.js:

         var text = RG.SVG.create({
             svg: obj.svg,
             parent: opt.parent || obj.svg.all,
             type: 'text',
             attr: {
                 fill: color,
                 x: x,
                 y: y,
                 'font-size': typeof size === 'number' ? size + 'pt' : size,
                 'font-weight': bold ? 900 : 100,
                 'font-family': font ? font : 'sans-serif',
                 'font-style': italic ? 'italic' : 'normal',
                 'text-anchor': halign,
                 'dominant-baseline': valign
             }
         });

         var textNode = document.createTextNode(str);
         text.appendChild(textNode);

        //
         // Add a background color if specified
         //
         if (typeof background === 'string') {

             var bbox = text.getBBox(),
                 rect = RG.SVG.create({
                     svg: obj.svg,
                     parent: obj.svg.all,
                     type: 'rect',
                     attr: {
                         x: bbox.x - padding,
                         y: bbox.y - padding,
                         width: bbox.width + (padding * 2),
                         height: bbox.height + (padding * 2),
                         fill: background
                     }
                 });
             obj.svg.insertBefore(rect, text);
         }

I think the problem is that there is an inconsistency in the lines
            parent: opt.parent || obj.svg.all,
                     parent: obj.svg.all,
             obj.svg.insertBefore(rect, text);

rect and text are SVG elements, with potentially different parent-Nodes and are inserted in again a different parent-Node.

When I change the line (line 1906)
             obj.svg.insertBefore(rect, text);
into
             obj.svg.all.insertBefore(rect, text);
it seems to work, but I am not sure if this fixes it completely.

Regards,

Jan Dirk
Posted by Richard on 14th April 2017
Hi there,

By using the dev libraries this error doesn't present itself:

www.rgraph.net/tests/svg-gradients.html

Here's the necessary libraries:

www.rgraph.net/tests/RGraph.svg.common.core.js
www.rgraph.net/tests/RGraph.svg.common.tooltips.js
www.rgraph.net/tests/RGraph.svg.line.js


Richard
Posted by Jan Dirk on 14th April 2017
I see you change the particular line to parent.insertBefore(rect, text);
This makes more sense and can confirm that the issue seems to be resolved in this (tests) version.

Regards,

Jan Dirk

Add a reply




« Back to message list