title: Passing D3 data to bootstrap modal dialog
body: <p>I am creating a number of charts with D3, each of which is contained within a bootstrap tab element. I have no problem creating data-rich mouseovers/tooltips for the chart elements which incorporate elements of the D3.csv imported dataset.  However when I create a bootstrap modal dialog that launches when a user clicks on a chart element, I get the dialog but am unable to pass D3 data to it. The base modal dialog looks like:</p>
  
  <pre><code>&lt;div class="modal fade" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which is picked up in the javascript with</p>
  
  <pre><code>// open modal dialogue on click
  $('#myModal').on('show.bs.modal', function(d) {
      let modalTitle = d3.selectAll("h4.modal-title");
      modalTitle.text("test");
      let modalBody = d3.selectAll(".modal-body");
      modalBody.html("Country should be: " + d.Country + "&lt;br&gt;" + "Operator should be: " + d.Operator);
      console.log("operator: " + d.Operator + "   Country: " + d.Country);
  })
  </code></pre>
  
  <p>I can push text into elements of the modal dialogue but I can't access the csv array of values e.g. <code>d.Country</code>, <code>d.Operator</code> that I could with the mouseover.  I suspect it is because I am not using <code>d3.selectAll</code> to select the <code>#myModal</code> ID of the dialogue but I can't seem to get it to recognise the <code>show.bs.modal</code> with any sort of <code>d3.selectAll</code> statement.  Do I have to pass all the data to the modal via data-id assignments in the div as in <a href="https://stackoverflow.com/questions/22394696/load-modal-with-custom-data-id">this problem</a>? I have tried but bootstrap doesn't appear to pick up the data when it is attached to SVG element as opposed to an HTML element.</p>
  
  <p>Here is a <a href="http://plnkr.co/edit/KlXRqCVhn6xGZfnfdxgV" rel="nofollow noreferrer">Plunker</a> of the problem.  </p>