html - 如何隐藏现有的 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 在不同的 div 中绘制所有图形

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 除了像这样选择的那个:

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

请参阅此 fiddle :https://jsfiddle.net/m4mqrnxk/1/