use xmlns namespaces module instead of hard-coded the urls

Author: etpinard

src/components/drawing/index.js

@@ -13,6 +13,7 @@ var Plotly = require('../../plotly');
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
+var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 var subTypes = require('../../traces/scatter/subtypes');
 var makeBubbleSizeFn = require('../../traces/scatter/make_bubble_size_func');
 
@@ -449,12 +450,8 @@ drawing.makeTester = function(gd) {
         .data([0]);
 
     tester.enter().append('svg')
-        .attr({
-            id: 'js-plotly-tester',
-            xmlns: 'http://www.w3.org/2000/svg',
-            // odd d3 quirk - need namespace twice??
-            'xmlns:xmlns:xlink': 'http://www.w3.org/1999/xlink'
-        })
+        .attr('id', 'js-plotly-tester')
+        .attr(xmlnsNamespaces.svgAttrs)
         .style({
             position: 'absolute',
             left: '-10000px',

src/lib/svg_text_utils.js

@@ -14,16 +14,23 @@
 var Plotly = require('../plotly');
 var d3 = require('d3');
 
+var xmlnsNamespaces = require('../constants/xmlns_namespaces');
+
 var util = module.exports = {};
 
 // Append SVG
 
 d3.selection.prototype.appendSVG = function(_svgString) {
-    var skeleton = '<svg xmlns="http://www.w3.org/2000/svg" ' +
-            'xmlns:xlink="http://www.w3.org/1999/xlink">' +
-            _svgString + '</svg>',
-        dom = new DOMParser().parseFromString(skeleton, 'application/xml'),
+    var skeleton = [
+        '<svg xmlns="', xmlnsNamespaces.svg, '" ',
+        'xmlns:xlink="', xmlnsNamespaces.xlink, '">',
+        _svgString,
+        '</svg>'
+    ].join('');
+
+    var dom = new DOMParser().parseFromString(skeleton, 'application/xml'),
         childNode = dom.documentElement.firstChild;
+
     while(childNode) {
         this.node().appendChild(this.node().ownerDocument.importNode(childNode, true));
         childNode = childNode.nextSibling;

src/plot_api/plot_api.js

@@ -28,6 +28,7 @@ var Legend = require('../components/legend');
 var Shapes = require('../components/shapes');
 var Titles = require('../components/titles');
 var manageModeBar = require('../components/modebar/manage');
+var xmlnsNamespaces = require('../constants/xmlns_namespaces');
 
 
 /**
@@ -2567,11 +2568,7 @@ function makePlotFramework(gd) {
     }
 
     fullLayout._paperdiv.selectAll('.main-svg')
-        .attr({
-            xmlns: 'http://www.w3.org/2000/svg',
-            // odd d3 quirk - need namespace twice??
-            'xmlns:xmlns:xlink': 'http://www.w3.org/1999/xlink'
-        });
+        .attr(xmlnsNamespaces.svgAttrs);
 
     fullLayout._defs = fullLayout._paper.append('defs')
         .attr('id', 'defs-' + fullLayout._uid);

src/plots/geo/geo.js

@@ -21,6 +21,7 @@ var createGeoScale = require('./set_scale');
 var createGeoZoom = require('./zoom');
 var createGeoZoomReset = require('./zoom_reset');
 
+var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 var constants = require('../../constants/geo_constants');
 var topojsonUtils = require('../../lib/topojson_utils');
 var topojsonFeature = require('topojson').feature;
@@ -214,10 +215,7 @@ proto.makeFramework = function() {
 
     var hoverContainer = this.hoverContainer = geoDiv.append('svg');
     hoverContainer
-        .attr({
-            xmlns:'http://www.w3.org/2000/svg',
-            'xmlns:xmlns:xlink': 'http://www.w3.org/1999/xlink'
-        })
+        .attr(xmlnsNamespaces.svgAttrs)
         .style({
             'position': 'absolute',
             'z-index': 20,
@@ -226,9 +224,8 @@ proto.makeFramework = function() {
 
     var framework = this.framework = geoDiv.append('svg');
     framework
+        .attr(xmlnsNamespaces.svgAttrs)
         .attr({
-            'xmlns':'http://www.w3.org/2000/svg',
-            'xmlns:xmlns:xlink': 'http://www.w3.org/1999/xlink',
             'position': 'absolute',
             'preserveAspectRatio': 'none'
         });

src/snapshot/tosvg.js

@@ -9,8 +9,11 @@
 
 'use strict';
 
-var Plotly = require('../plotly'),
-    d3 = require('d3');
+var Plotly = require('../plotly');
+var d3 = require('d3');
+
+var xmlnsNamespaces = require('../constants/xmlns_namespaces');
+
 
 module.exports = function toSVG(gd, format) {
 
@@ -139,8 +142,8 @@ module.exports = function toSVG(gd, format) {
 
     // fix for IE namespacing quirk?
     // http://stackoverflow.com/questions/19610089/unwanted-namespaces-on-svg-markup-when-using-xmlserializer-in-javascript-with-ie
-    svg.node().setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
-    svg.node().setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
+    svg.node().setAttributeNS(xmlnsNamespaces.xmlns, 'xmlns', xmlnsNamespaces.svg);
+    svg.node().setAttributeNS(xmlnsNamespaces.xmlns, 'xmlns:xlink', xmlnsNamespaces.xlink);
 
     var s = new window.XMLSerializer().serializeToString(svg.node());
     s = Plotly.util.html_entity_decode(s);
@@ -154,8 +157,8 @@ function insertGlImage(fullLayout, scene, opts) {
 
     fullLayout._glimages.append('svg:image')
         .attr({
-            xmlns:'http://www.w3.org/2000/svg',
-            'xlink:xlink:href': imageData, // odd d3 quirk, need namespace twice
+            xmlns: xmlnsNamespaces.svg,
+            'xlink:href': imageData,
             x: opts.x,
             y: opts.y,
             width: opts.width,

src/traces/heatmap/plot.js

@@ -15,6 +15,7 @@ var tinycolor = require('tinycolor2');
 var Plotly = require('../../plotly');
 var Lib = require('../../lib');
 var getColorscale = require('../../components/colorscale/get_scale');
+var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 var maxRowLength = require('./max_row_length');
 
@@ -372,8 +373,8 @@ function plotOne(gd, plotinfo, cd) {
         .classed(id, true)
         .datum(cd[0])
         .attr({
-            xmlns: 'http://www.w3.org/2000/svg',
-            'xlink:xlink:href': canvas.toDataURL('image/png'), // odd d3 quirk, need namespace twice
+            xmlns: xmlnsNamespaces.svg,
+            'xlink:href': canvas.toDataURL('image/png'),
             height: imageHeight,
             width: imageWidth,
             x: left,