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

我添加了一个复选框选项下拉列表，当选择一个选项时，它会在div

#chartContainer

中呈现一个D3图形，并在容器上方为该图表添加一个新的按钮选项卡

但是，如果我在下拉列表中选择选项2，则会添加第二个选项卡按钮，但第二个图形将在第一个渲染的图形下方渲染

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

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

图表容器和图表选项复选框：

在ChartContainer中创建选项卡并绘制图形的脚本片段：

/*数据集对象要求：数据、类别、筛选器列表*/
函数可视化（rawDataSet）{
//0.过程数据
让dataSet=process（rawDataSet，'month'）；
让模式=月；
//让dataSet=process（rawDataSet，'day'）；
//1.绘制图例和所有单选按钮配件
//2.绘制主图表
让newStackChart=stackChart（）.data（dataSet）.tickFormat（“%b/%y”）；
//动态创建渲染图形的新选项卡
var ul=tabs.find（“ul”）；
$（'li>'）。附录（ul）；
制表符。制表符（“刷新”）；
tabs.tabs（'select'，tabCounter-1）；
//切换要隐藏的上一个图表
//为下一次图表渲染腾出空间的步骤
//不确定如何获取当前呈现的svg的id
切换图表可见性（svg）；
d3.选择（'div#chartContainer'）
.附加（“div”）
.classed（“svg容器”，true）//使其响应的容器类
.append（“svg”）
//响应型SVG需要这两个属性，并且没有宽度和高度属性
.attr（“保存Aspectratio”、“xMinYMin满足”）
.attr（“视图框”、“0 0 2000”）
//类以使其响应
.classed（“svg内容响应”，真）
.call（newStackChart）；
}

您可以使用唯一的

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

然后在选项卡上添加一个事件，该事件将隐藏所有graph

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

使用

仅显示ID

执行

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

---

请看这个小提琴：

我还没有测试，但是这样做会删除我的第一个或上一个渲染图吗？我的目标是在原来的基础上创建一个新的容器和按钮，这样我就可以在图形之间切换。现在，它会呈现附加在原始图形下方的图形。您只想绘制两个图形一次，然后隐藏/显示选定的图形？是的，因此如果我在列表中选择选项一，将绘制一个图形和选项卡按钮。如果我选择选项2，则在第一个图形容器顶部的新容器中绘制第二个图形。单击tab1将返回到渲染的第一个图形，单击tab2将返回到第二个图形。在屏幕上的同一区域内。确定后，您可以做的是：当我单击选项卡1时，将图形2的样式设置为

display:none

，将图形1的样式设置为

display:block

，反之亦然。当您选择选项2时，第一个图形将被隐藏（display:none）因此，它将覆盖在第一个图形的顶部。我尝试了此代码的一个变体，使用下拉复选框创建每种工作的图形类型。但是为每个渲染的图形创建的选项卡不会更改显示的图形。这就好像点击事件没有触发标签-有什么想法吗？

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

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

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