Javascript 只有一项获得'；s显示在x轴d3中-使用刻度值按顺序

我这里有一个问题，这说明了我的问题。如您所见，x轴上只有一个值。如果删除

tickvalues

，我会得到所有值，但这会导致其他数据出现问题，因为会有大量数据。我使用

tickvalues

将项目数量限制为20个。这适用于我的其他图表，但不适用于此图表。刻度为

ordinal

，在控制台中调用xaxis时，我得到一个

NaN

。我认为这会干扰

滴答声的值。如果有人能看一下这支笔并提供任何建议，我们将不胜感激。下面是代码部分。有关完整代码，请参阅画笔

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

我希望这就是你想要的：

我发现使用小提琴更容易：）

我使用tickFormat代替tickValues：

 .tickFormat(function(d, i) {
      return d; 
    });

如果可以，请告诉我：）
我希望这就是您想要的：

我发现使用小提琴更容易：）

我使用tickFormat代替tickValues：

 .tickFormat(function(d, i) {
      return d; 
    });

如果可以，请告诉我：）
注意到没有足够的刻度，但标签在那里。我再看一眼谢谢你的回答。谢谢。而且我觉得JSFIDLE很好。我发现tickformat的问题是，它在我想要州名的地方显示一些数字（
[“AK”、“AL”、“CA”…]
）。x轴上的刻度/项目数量应限制为20。仅此而已。我的代码中有
checklength（）
函数来获取包含20项的
\u arr
数组。但是将它们与
tickvalues
一起使用不仅仅对我有效。注意到没有足够的刻度，但是标签在那里。我再看一眼谢谢你的回答。谢谢。而且我觉得JSFIDLE很好。我发现tickformat的问题是，它在我想要州名的地方显示一些数字（
[“AK”、“AL”、“CA”…]
）。x轴上的刻度/项目数量应限制为20。仅此而已。我的代码中有
checklength（）
函数来获取包含20项的
\u arr
数组。但是，将它们与
tickvalue
结合使用并不仅仅适合我。