我在 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 模式?
最佳答案
我想您实际上必须使用模态具有的 .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">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
关于javascript - D3 从 .onclick 打开 Bootstrap 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53388842/