javascript - x轴d3中仅显示一项-使用tickvalues的顺序

我在这里有一个pen，这表明我的问题。如您所见，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);

最佳答案

我希望这就是您想要的：https://jsfiddle.net/reko91/yg0rs4xc/17/

我发现使用小提琴更容易:)

代替tickValues我使用tickFormat：

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

让我知道是否可以:)

关于javascript - x轴d3中仅显示一项-使用tickvalues的顺序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35913551/