只有一个项目显示在 x 轴 d3 中 - 使用刻度值的序号

我这里有一支笔，它显示了我的问题。如您所见，x 轴上只有一个值。如果我删除tickvalues，我会得到所有值，但这会导致其他数据出现问题，因为会有大量的数据集。我正在使用tickvalues将项目数限制为 20。这适用于我的其他图表，但不适用于此图表。比例ordinal，在控制台中，我在调用xaxis时得到了NaN。我认为这是在干扰tickvalues.如果有人能看一下笔并提供任何建议，将不胜感激。下面是代码部分。有关完整代码，请参阅笔。

function plotVerticallyStacked(data) {
  checkLength(dataset);
  var x = d3.scale.ordinal()
    .rangeRoundBands([0, WIDTH], .1);
  var y = d3.scale.linear()
    .rangeRound([HEIGHT, 0]);
  // Color range - add your favorites here
  var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(_arr.map(function(d) {
      return d["state"];
    }));
  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));
  appendResponsiveSvg();
  svg.append("g")
    .attr("transform", "translate(" + MARGINS.left + "," + MARGINS.top + ")");
  var domain = ["sum(quantity)"];
  data.forEach(function(_data) {
    var y0 = 0;
    _data.groupedItem = [];
    _data.values.map(function(d, index) {
      _data.groupedItem.push(domain.map(function(name) {
        return {
          label: "quantity" + (index + 1),
          name: name,
          y0: y0,
          y1: y0 += +d[name]
        };
      })[0]);
      _data.total = _data.groupedItem[_data.groupedItem.length - 1].y1;
    });
  });
  data.sort(function(a, b) {
    return b.total - a.total;
  });
  x.domain(data.map(function(d) {
    return d.values[0]["sum(quantity)"];
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.total;
  })]);
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + HEIGHT + ")")
    .call(xAxis);
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
  var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) {
      return "translate(" + x((d.values[0])["sum(quantity)"]) + ",0)";
    });
  state.selectAll("rect")
    .data(function(d) {
      return d.groupedItem;
    })
    .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
      return y(d.y1);
    })
    .attr("height", function(d) {
      return y(d.y0) - y(d.y1);
    })
    .style("fill", function(d) {
      return color(d.label);
    });
}
plotVerticallyStacked(verticalStackedData);