如何隐藏现有的D3图表并呈现新图形？

Question

我已经添加了复选框选项的下拉列表，当选中一个选项时，它会在div #chartContainer中呈现D3图形，并在容器上方为该图表添加新的按钮选项卡。

但是，如果我在下拉菜单中选择选项二，则会添加第二个选项卡按钮，但第二个图形将呈现在第一个图形下方。

我的目的是隐藏当前渲染的svg，并在选择新图形选项时显示下一个图形。

如何隐藏现有的D3图表并呈现新图形？

chartContainer和图表选项复选框：

<ul class="dropdown-menu" id="chartDropdown" role="menu"> 
     <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Chart 1</a></li> 
     <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Chart 2</a></li>         
</ul> 


    <div class="row top-buffer" id="tabContainer"> 

      <ul class="nav nav-pills" id="chartTabs"> 
       <li><a data-toggle="tab" href="#fragment-1">Chart</a></li> 
      </ul> 


      @* render chart in this container *@ 
      <div id="chartContainer"> 


      </div> 
     </div> 

切换图表能见度通过ID方法：

脚本的

function toggle_chart_visibility(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
    } 

片段创建标签，并在ChartContainer绘制图形：

  /* dataSet object requriement: data, categories, filter lists*/ 
     function visualize(rawDataSet) { 
      //0. process data 
      let dataSet = process(rawDataSet, 'month'); 
      let mode = 'month'; 
      // let dataSet = process(rawDataSet, 'day'); 
      //1. draw legend and all radio button fitlers 
      //2. draw main chart 

      let newStackChart = stackChart().data(dataSet).tickFormat("%b/%y"); 

      //Dynamically create a new tab for the rendered graph 
      var ul = tabs.find("ul"); 
      $('<li><a href="#fragment-' + ++tabCounter + '">Chart</a></li>').appendTo(ul); 
      tabs.tabs("refresh"); 
      tabs.tabs('select', tabCounter - 1); 


      //toggle the previous chart to hide 
      //to make room for the next chart render 
      //not sure how to get the id of the current svg rendered 
      toggle_chart_visibility(svg); 

      d3.select('div#chartContainer') 
       .append("div") 
       .classed("svg-container", true) //container class to make it responsive 
       .append("svg") 
       //responsive SVG needs these 2 attributes and no width and height attr 
       .attr("preserveAspectRatio", "xMinYMin meet") 
       .attr("viewBox", "0 0 2000 2000") 
       //class to make it responsive 
       .classed("svg-content-responsive", true) 
       .call(newStackChart); 

     } 

Answer 1

你可以做的是画具有独特id

d3.select("#chartContainer") 
    .selectAll("div") 
    .data(data) 
    .enter() 
    .append('div') 
    .attr('id', function(d, i){ return 'id' + i }) 
    .text(function(d){ return 'This is chart ' + d;}) // add your graph here 

在不同div所有图表然后在将隐藏所有图形div除了一个选择这样的选项卡添加事件：

d3.select("ul#tabs") 
    .selectAll("li") 
    .data(data) 
    .enter() 
    .append('li') 
    .text(function(d){ return d; }) 
    .on('click', function(d, i){onlyShowByID('id' + i); }); 

与onlyShowByID做

function onlyShowByID(id) { 
    d3.select("#chartContainer") 
    .selectAll("div") 
    .style('display', function(d){ 
     var currentID = d3.select(this).attr('id'); 
     return currentID === id ? 'block' : 'none' 
     }) 
} 

看到这个小提琴：https://jsfiddle.net/m4mqrnxk/1/