title: How can I attach dynamic objects to an HTML element?
body: <p>I am using D3.js to create a chart as described in this simplified example</p>
  
  <pre><code>class MyClass {
     // logic goes here
     // constructor() and other functions defined here.
     doSomething() {
         console.log('something.');
     }
  }
  
  function createChart(chartID, data) {
      // creating the SVG and appending it to the body
      var svg = d3.select('body').append('svg')
                       .attr('width',400)
                       .attr('height',400)
                       .attr('id',chartID);
  
     // instantiating an instance of MyClass to be attached to the SVG
     var anObject = new MyClass();
     svg.myObject = anObject;   // this has no effect
  
  
     // code to actually build the chart + math to be done on passed data
  
     // finally, attach a click event to the svg so that data can be manipulated later on
     svg.on('click',function(){
          var object = d3.select(this).myObject;   //this does not work
          object.doSomething();                   // so this also doesn't work
     });
  }
  
  createChart('test1',[1,2,3,4]);   // triggering the createChart() function
  </code></pre>
  
  <p>I am assuming that the variable <code>svg</code> is treated like any JSON object, so, I thought I could attach any object to it. </p>
  
  <p>Apparently, that is not the case. How can I go about attaching an object to an HTML DOM element, so that I may access the object later?</p>