javascript - D3 从 .onclick 打开 Bootstrap 模式

Question

我在 D3 中有一个图表。我希望能够单击图表的特定部分并打开 Bootstrap 模式，传递一些数据。我的 d3 代码如下所示

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

我的 html 看起来像这样

<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">

如何在我的 d3 图表中单击一下即可打开我预先创建的 Bootstrap 模式？

Answer 1

我想您实际上必须使用模态具有的 .show() 方法，而不是 click 触发器(或方法)。模式由 show 或 hide 触发。下面是一个有效的简单示例，我想您也可以将其应用到您的代码中。

干杯!

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>