Javascript d3轴标签更新

我已经尝试了我能想到的每一种排列方式，但无法清除和重置轴标签。我正在创建通过下拉菜单更新的热图。图表显示，热图数据绘制正确。我遇到的问题是，每次图表更新时，新数据的所有x轴标签都会随着数据更新而追加（但如果我返回到以前加载的数据集，它不会追加，而是使用旧标签）。我曾尝试创建一个函数，当下拉菜单更改时，该函数将被调用以“清除”图形，然后调用另一个函数来“重画”它。我试着让标签变为变量，然后看了很多例子

即使我运行了一个.remove（）-我已经在svg、g、by g.class等上完成了这项操作。轴标签仍然挂起，即使运行remove会使DOM元素消失。这似乎与.exit.remove模式有关，但我无法确定顺序？任何帮助都会很好

var dates = [];
var bacteria = [];

var itemHeight = 30,
  itemWidth = 12,
  cellSize = itemHeight - 1,
  margin = {
    top: 120,
    right: 20,
    bottom: 20,
    left: 80
  };

var e = document.getElementById("level");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

var title = text.charAt(0).toUpperCase() + text.slice(1);
var newtitle = document.getElementById("thelevel").innerHTML=title;

d3.json("./javascripts/biome/biome_new.json").then(function(response) {
  var data = response;

  data.forEach(e => e.ubiome = e.ubiome.filter(e => e.tax_rank === value));

  dates = data.map(function(d) {
    return d.sample_date;
  })

  for (i = 0; i < data.length; i++) {
    bacteria.push(data[i].ubiome.slice(0, data[i].ubiome.length));
  }
  var bacteriaList = d3.merge(bacteria).map(function(d) {
    return d.tax_name
  });

  bacteriaList = d3.set(bacteriaList).values();

  var width = bacteriaList.length*itemWidth,
    height = 500 - margin.top - margin.bottom;

  var y_elements = dates,
    x_elements = bacteriaList;

  var xScale = d3.scaleBand()
    .domain(x_elements)
    .range([0, x_elements.length * itemWidth]);

  var xAxis = d3.axisTop()
    .scale(xScale)
    .tickFormat(function(d) {
      return d;
    });

  var yScale = d3.scaleBand()
    .domain(y_elements)
    .range([0, y_elements.length * itemHeight]);

  var yAxis = d3.axisLeft()
    .scale(yScale)
    .tickFormat(function(d) {
      return  moment(d).format("YYYY-MM-DD");
    });

  var colorScale = d3.scaleSequential(d3.interpolateOrRd)
    .domain([0, 10000]);

  var svg = d3.select('#heatmap')
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var parents = svg.selectAll('svg')
    .data(data)
    .enter().append('g')
    .attr("transform",function(d) { return "translate(0," + yScale(d.sample_date) + ")" });

  var children = parents.selectAll('rect')
    .data(function(d) { return d.ubiome; })
    .enter()
    .append('rect')
    .attr('class', 'cell')
    .attr('width', 15)
    .attr('height', cellSize)
    .attr('x', function(d) {  return xScale(d.tax_name); })
    .attr('fill', function(d) {
      return colorScale(d.count_norm);
    });

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .selectAll('text')
    .attr('font-weight', 'normal');

  svg.append("g")
    .attr("class", "x axis")
    .call(xAxis)
    .selectAll('text')
    .attr('font-weight', 'normal')
    .style("text-anchor", "start")
    .attr("dx", ".8em")
    .attr("dy", "1.2em")
    .attr("transform", function(d) {
      return "rotate(-90)";
    });

    // Remove old elements
  parents.exit().remove();
  children.exit().remove();

});

function clearData(){
  bacteriaList = [];
  dates = [];

  var somemap = d3.selectAll("#heatmap");
  somemap.select("svg").remove();
  d3.select('#heatmap').html("");
  updateData();
}

function updateData(option) {
  var e = document.getElementById("level");
  var value = e.options[e.selectedIndex].value;
  var text = e.options[e.selectedIndex].text;

  var title = text.charAt(0).toUpperCase() + text.slice(1);
  var newtitle = document.getElementById("thelevel").innerHTML=title;

  d3.json("./javascripts/biome/biome_new.json").then(function(response) {
    var data = response;

    data.forEach(e => e.ubiome = e.ubiome.filter(e => e.tax_rank === value));

    dates = data.map(function(d) {
      return d.sample_date;
    })

    for (i = 0; i < data.length; i++) {
      bacteria.push(data[i].ubiome.slice(0, data[i].ubiome.length));
    }
    var bacteriaList = d3.merge(bacteria).map(function(d) {
      return d.tax_name
    });

    bacteriaList = d3.set(bacteriaList).values();

    var width = bacteriaList.length*itemWidth,
      height = 500 - margin.top - margin.bottom;

    var y_elements = dates,
      x_elements = bacteriaList;

    var xScale = d3.scaleBand()
      .domain(x_elements)
      .range([0, x_elements.length * itemWidth]);

    var xAxis = d3.axisTop()
      .scale(xScale)
      .tickFormat(function(d) {
        return d;
      });

    var yScale = d3.scaleBand()
      .domain(y_elements)
      .range([0, y_elements.length * itemHeight]);

    var yAxis = d3.axisLeft()
      .scale(yScale)
      .tickFormat(function(d) {
        return  moment(d).format("YYYY-MM-DD");
      });

    var colorScale = d3.scaleSequential(d3.interpolateOrRd)
      .domain([0, 10000]);

    var svg = d3.select('#heatmap')
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var parents = svg.selectAll('svg')
      .data(data)
      .enter().append('g')
      .attr("transform",function(d) { return "translate(0," + yScale(d.sample_date) + ")" });

    var children = parents.selectAll('rect')
      .data(function(d) { return d.ubiome; })
      .enter()
      .append('rect')
      .attr('class', 'cell')
      .attr('width', 15)
      .attr('height', cellSize)
      .attr('x', function(d) {  return xScale(d.tax_name); })
      .attr('fill', function(d) {
        return colorScale(d.count_norm);
      });

    var they = svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .selectAll('text')
      .attr('font-weight', 'normal');

    var thex = svg.append("g")
      .attr("class", "x axis")
      .call(xAxis)
      .selectAll('text')
      .attr('font-weight', 'normal')
      .style("text-anchor", "start")
      .attr("dx", ".8em")
      .attr("dy", "1.2em")
      .attr("transform", function(d) {
        return "rotate(-90)";
      });

      they.exit().remove();
      thex.exit().remove();

  });
}

排序方式：
亚纲亚目亚纲亚门上门

对于那些遇到这种情况的人，我终于自己找到了答案

这个问题与数组的存储方式有关，可能与d3无关

一旦我将更新函数中的原始变量更新为：

bacteria.length = 0;

---

…一切都安排妥当了。最初的阵列刚刚挂起。一旦我重置它，更新功能就可以重建一切正常。

是否可以包含指向gist/block或fiddle/plunkr的链接？嗨，安德鲁，很抱歉延迟了。我已经更新了我的问题，加入了一个片段。谢谢你的帮助！与问题无关，但如果下拉列表中的选项是根据分类等级显示的，从超级门（第一个）到物种（最后一个），则更好，字母顺序不是最好的。回到代码：你的更新功能不正确，这里有很多重复。。。我建议您在这段代码中进行一次大的重构。谢谢Gerardo的反馈。下拉列表顺序的改变是有意义的。至于复制品，这就是我被困的地方。什么不需要保留，什么负责更新数据。很多例子表明你必须重新设置标注栏，这意味着要重新绘制整个画面？但轴心仍然存在。复制数据只是为了让小提琴手展示错误。