Update in CDN caused problem appending to SVG container

[alexanthony813-zz]

Thank you in advance for your time. For some reason a Datamaps globe that was working before is now not rendering at all. The error is simply : TypeError: Cannot read property 'append' of undefined

What is weird is that I am definitely appending an svg container, but that when I instantiate the new Datamap it cannot actually find this svg container to append to. In the Chrome debugger, I see a Datamap svg element flash on and off, as if it is appearing and disappearing from the DOM. This is also really weird because it was working for a couple of months and just stopped.

Here is a jsfiddle : https://jsfiddle.net/exmjzazg/

Here is my code below where I create the actual svg container and then the body of the function that I use to append the globe to this svg. There were no changes to the code and even after installing with NPM and replacing the CDN's, this is still happening.

Please let me know if anything here seems like it has been deprecated because that's my only idea at this point:

` var svg =d3.select('.mapCanvas').append("svg") .attr("fill", "transparent") .attr("width", $window.innerWidth) .attr("height", $window.innerHeight - 500) .attr("id", "mainCanvas") .append("g");

var createMap = function (rotationNums) { map = new Datamap({ element: document.getElementById('mainCanvas'), scope: 'world', projection: 'orthographic', geographyConfig: { popupOnHover: false, highlightOnHover: false }, fills: { defaultFill: '#34495e' }, projectionConfig: { rotation: rotationNums }, bubblesConfig: { popupOnHover: false, animate: false, highlightOnHover: false } }); map.graticule(); createBubbleHover(); //create bubbles for each relative in the relative list, after parsing with makeNewBubbleData };`

HERE IS A PICTURE OF THE ERROR LOG

[markmarkoh]

@alexanthony813 which CDN are you getting this error from? Can you repro within a JSFiddle/JSBin?

[alexanthony813-zz]

Just added a jsfiddle, sorry about that. Unfortunately I really have no way of knowing which CDN is causing the error: I have tried various combinations of different CDNs for Topojson, datamaps, and d3. I have also downloaded the files rather than using the CDN. The error still does not change at all. I think this is a dependency issue but I have no clue as to why this just started happening on both the deployed and local versions without any changes to the code base.

[markmarkoh]

@alexanthony813 Looking at that fiddle, you are setting the element to an SVG <g/> tag. This is not what DataMaps is expecting, instead it's expecting just a blank <div/> and it mounts the <svg>...</svg> elements automatically.

Can you update your code to ensure that DataMaps is getting a div element?

[alexanthony813-zz]

we fixed it by appending it to an svg element.