title: How do I pass a reference to a d3 element to function?
body: <p>I have an element which I can manipulate through "d3.select(this.$el).append('svg')", my question is how do I make it possible to do the same manipulation in a called function?</p>
  
  <p>I'm new to d3 and jquery and have just worked through this tutorial from Splunk, which uses both: <a href="https://docs.splunk.com/Documentation/Splunk/6.5.3/AdvancedDev/CustomVizTutorial" rel="nofollow noreferrer">https://docs.splunk.com/Documentation/Splunk/6.5.3/AdvancedDev/CustomVizTutorial</a>.</p>
  
  <p>The problem arises when I try to move the creation of the svg into a separate function.  Here's my update view function:</p>
  
  <pre><code>    updateView: function(data, config) {
          // Return if no data
          if (!data) {
              return;
          }
  
          // Assign datum to the data object returned from formatData
          var datum = data;
  
  //START BIT THAT WORKS
          // Clear the div
          /*this.$el.empty();
  
          // Get color config or use a default yellow shade
          var mainColor = config[this.getPropertyNamespaceInfo().propertyNamespace + 'mainColor'] || '#f7bc38';
  
          // Set meter max value or use a default
          var maxValue = parseFloat(config[this.getPropertyNamespaceInfo().propertyNamespace + 'maxValue']) || 100;
  
          // Set height and width
          var height = 220;
          var width = 420;
  
          // SVG setup
          var svg  = d3.select(this.el).append('svg')
              .attr('width', width)
              .attr('height', height)
              .style('background', 'white')
              .append('g')
              .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
  
          // Text
          svg.append('text')
              .datum(datum)
              .attr('class', 'meter-center-text')
              .style('text-anchor', 'middle')
              .style('fill', mainColor)
              .text(function(d){
                  return "0";
                  //return parseFloat(d);
              });*/
  //END BIT THAT WORKS
  
          newFunc=function(myElement) {
              console.log("newFunc");
  
              // Clear the div
              myElement.empty();
  
              // Get color config or use a default yellow shade
              mainColor='#f7bc38';
  
              // Set meter max value or use a default
              maxValue=1000000;
  
              // Set height and width
              var height = 220;
              var width = 420;
  
              // SVG setup
              var svg  = d3.select(myElement).append('svg')
                  .attr('width', width)
                  .attr('height', height)
                  .style('background', 'white')
                  .append('g')
                  .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
  
              // Text
              svg.append('text')
                  .datum(datum)
                  .attr('class', 'meter-center-text')
                  .style('text-anchor', 'middle')
                  .style('fill', mainColor)
                  .text(function(d){
                      return "100";
                  });
          };
          newFunc(this.$el);
      }
  </code></pre>
  
  <p>The first half is the code from the tutorial, this works as expected (it's commented out above).</p>
  
  <p>The second half is me replicating this code in a new function, for simplicity's sake here it's just an inner function.</p>
  
  <p>This produces the error "this.ownerDocument is undefined", which I've narrowed down to being caused by the "d3.select(myElement).append('svg')" line.</p>
  
  <p>So my question is, what is the correct way to pass in the reference to this element and work on it within the function?</p>