показать div и скрыть остальные - d3.js - PullRequest
Новая
       15

показать div и скрыть остальные - d3.js

0 голосов
/ 01 апреля 2019

Я сделал гистограмму в d3.js. Когда я нажимаю на одну из галочек, под гистограммой появляется div, связанный с этой конкретной галочкой. Итак, есть 24 тика с 24 совпадающими div, содержащими информацию об этих тиках.

Это работает нормально, но теперь я хочу, чтобы все остальные div'ы закрывались, когда я открывал новый.

Этот код у меня пока. Мне нужно нажать тик во второй раз, чтобы закрыть его. Гистограмма 

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 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 появляется и «скользит» сразу после этого. Я думаю, что это потому, что у тиков нет класса «член», но я не могу заставить его работать.

1 Ответ

0 голосов
/ 03 апреля 2019

Лучшим решением может быть сделать так, чтобы ваши информационные элементы разделяли общий класс (например, всплывающую подсказку ниже), а затем скрывали все из них, прежде чем показывать выбранный элемент.Пример кода: 

<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');
}
...