我在d3.js中制作了条形图。当我单击一个刻度时,在链接到该特定刻度的条形图下方会出现一个div。因此,有24个刻度线和24个匹配的div包含有关这些刻度线的信息。
这很好,但是现在我希望所有其他的div在我打开一个新的div时都关闭。
这是我到目前为止的代码。我需要再按一次勾号才能将其关闭。 Bar Chart
d3.selectAll(".tick")
.on("click",clickme)
function clickme(d){
var info = document.getElementById(""+d+ "");
if (info.style.display === "none") {
info.style.display = "block";
} else {
info.style.display = "none";
}
}
这是我的div外观
<div style = "display:none" id="Coal CCS retrofit" class = "hidden"> 1 </div>
<div style = "display:none" id="Coal CCS new built" class = "hidden"> 2 </div>
我尝试合并此jQuery:
$(document).ready(function () {
var $answers = $('.hidden');
$(".member").click(function () {
var $ans = $(this).next(".hidden").stop(true).slideToggle(100);
$answers.not($ans).filter('.block').stop(true).slideUp();
})
});
使用以下CSS:
.hidden {
display:none;
}
当我使用Jquery时,div弹出,并在此之后立即“滑动”。我认为这是因为壁虱没有班级的“成员”,但我无法使其正常工作。
答案 0 :(得分:0)
一个更好的解决方案可能是让您的信息div共享一个公共类(例如下面的工具提示),然后在显示被单击的div之前隐藏所有它们。示例代码:
<div id="Coal CCS new built" class = "tooltip"> 1 </div>
<div id="Coal CCS new built" class = "tooltip"> 2 </div>
d3.selectAll(".tick")
.on("click",clickme)
function clickme(d){
// Select element that should be shown
const element = d3.select("#"+d.id); // Or however you're deriving id
// Determine whether the element needs to be shown or hidden
const show = element.style('display') === 'none';
// Hide any tooltip that may be shown
d3.selectAll('.tooltip').style('display', 'none');
// Show element, if appropriate
if (show) element.style('display', 'block');
}