D3 open bootstrap modal from .onclick

Question

I have a chart in D3. I want to be able to click on a certain part of my chart and open a bootstrap modal, passing through some data. My d3 code looks like this

svg.append("g")
    .attr("class", "stores")
    .selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("d", path)
    .on("click", function(d){
        ('#exampleModal').trigger('click')
    }); 

My html looks like this

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">

How can i open my precreated bootstrap modal within a click in my d3 chart?

Answer 1

I guess you actually have to use the .show() method the modal has and not a click trigger (or method). A modal is triggered by show or hide. Below is a simple example that works, I guess you can apply this to your code too.

Cheers!

var modal = document.getElementById('myModal');
var svg = $("#mysvg");

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

svg.on("click", function(d){
  $("#myModal").show();
});

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <figcaption>A graph that shows the number of fruit collected</figcaption>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="420" height="150" aria-labelledby="title" role="img" id="mysvg">
  <title id="title">A bart chart showing information</title>
  <g class="bar">
    <rect width="40" height="19"></rect>
    <text x="45" y="9.5" dy=".35em">4 apples</text>
  </g>
  <g class="bar">
    <rect width="80" height="19" y="20"></rect>
    <text x="85" y="28" dy=".35em">8 bananas</text>
  </g>
  <g class="bar">
    <rect width="150" height="19" y="40"></rect>
    <text x="150" y="48" dy=".35em">15 kiwis</text>
  </g>
  <g class="bar">
    <rect width="160" height="19" y="60"></rect>
    <text x="161" y="68" dy=".35em">16 oranges</text>
  </g>
  <g class="bar">
    <rect width="230" height="19" y="80"></rect>
    <text x="235" y="88" dy=".35em">23 lemons</text>
  </g>
</svg>
</figure>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>