显示 div 并隐藏其他的 - d3.js答案

【问题标题】：show div and hide other ones - d3.js显示 div 并隐藏其他的 - d3.js
【发布时间】：2019-04-01 14:14:38
【问题描述】：

我在 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 会弹出，并在此之后立即“向上滑动”。我认为这是因为蜱虫没有类“成员”，但我无法使其工作。

【问题讨论】：

标签： d3.js bar-chart show-hide axis-labels

【解决方案1】：

更好的解决方案可能是让您的信息 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');
}

【讨论】：