title: Extending d3.selection in v5—is this the correct way to do it?
body: <p><strong>Background:</strong> I was trying to solve the problem of appending existing local <code>SVG</code> files to a <code>d3</code> SVG container in an <code>Electron</code> desktop app. I discovered that I can't use <code>d3.svg()</code> on local files because <code>fetch</code> does not work with the <code>file</code> protocol (so said the error msg).</p>
  
  <p>I came across this <a href="https://gist.github.com/biovisualize/373c6216b5634327099a" rel="nofollow noreferrer">gist</a> referenced by <a href="https://stackoverflow.com/a/40038305">this question</a> for extending <code>d3.selection</code> and it appears to do exactly what I need, adding <code>appendHTML</code> and <code>appendSVG</code> functions. </p>
  
  <p>When I tested the code though  (at bottom below), it threw an error: "Cannot read property 'prototype of undefined" – choking on this line:</p>
  
  <pre><code>d3.selection.enter.prototype.appendHTML 
  </code></pre>
  
  <p>I dug around a bit through logging to the console and came up with this change and it seems to work:</p>
  
  <pre><code>d3.selection.prototype.enter.prototype.appendHTML   
  </code></pre>
  
  <p><strong>My Question:</strong> Am I doing this right? Did something change in <code>d3</code> which necessitates the additional <code>prototype</code> reference? I'm no Javascript or d3 hero and would like to understand what the difference is here.</p>
  
  <pre><code>d3.selection.prototype.appendHTML =
      d3.selection.prototype.enter.prototype.appendHTML = function (HTMLString) {
          return this.select(function () {
              return this.appendChild(document.importNode(new DOMParser().parseFromString(HTMLString, 'text/html').body.childNodes[0], true));
          });
      };
  </code></pre>
  
  <hr>
  
  <p>Original code</p>
  
  <pre><code> d3.selection.prototype.appendHTML =
      d3.selection.enter.prototype.appendHTML = function(HTMLString) {
          return this.select(function() {
              return this.appendChild(document.importNode(new DOMParser().parseFromString(HTMLString, 'text/html').body.childNodes[0], true));
          });
      };
  
  
   d3.selection.prototype.appendSVG =
      d3.selection.enter.prototype.appendSVG = function(SVGString) {
          return this.select(function() {
              return this.appendChild(document.importNode(new DOMParser()
              .parseFromString('&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;' + SVGString + '&lt;/svg&gt;', 'application/xml').documentElement.firstChild, true));
          });
      };
  </code></pre>