javascript - 当轴标签映射为刻度域的一部分时，如何在 d3 中修改堆积条形图的轴标签

Question

我正在使用基于 this 的条形图，并且我想修改 x 轴标签(要么旋转它们，要么每隔一个或每隔三个显示一次……这样我就可以在不重叠的情况下适应标签)。我花了很多时间研究这个问题，但说起来容易做起来难(尽管我对 d3 还很陌生)。我相信有问题的代码段包括:

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

...

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

...

x.domain(data.map(function(d) { return d.State; }));

...上面是映射发生的地方(我假设基于'map'函数)

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

...

var state = svg.selectAll(".state")
  .data(data)
.enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

...

  state.selectAll("rect")
  .data(function(d) { return d.ages; })
.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.name); });

问题是我不一定要为图表中的每个条形图添加一个 x 轴标签(它变得太杂乱了)。我已经尝试了几种不同的使用方式

axis.ticks
axis.tickValues
axis.tickSubdivide
axis.tickSize

但我认为它们失败了，因为 d.State 与其各自的列结合(我的图表使用日期而不是州名)...有什么见解吗？

抱歉这个乱七八糟的问题。我欢迎那些了解我的问题的人进行编辑，以使我的问题更清楚(我不确定提出问题的最佳方式)。

Answer 1

线

x.domain(data.map(function(d) { return d.State; }));

正在设置轴使用的比例域。因为刻度是有序的，所以轴默认使用所有刻度值。您应该能够使用上面提到的 axis.tickValues 函数设置实际刻度值。您只需在设置比例域的调用之后设置它，因为我怀疑设置域会重置 tickValues。只需添加如下内容:

xAxis.tickValues(data.map( function(d,i) 
  { 
    if(i % 2 ===0 ) return d.State; 
  })
    .filter(function (d) 
      { return !!d; } ));

在这里，我将数据数据映射到散布着“未定义”的所选状态值的单个数组，然后过滤掉所有未定义的值。剩余的状态值成为刻度。

如果你使用下划线，你可能会让这条线更漂亮。

您可以看到工作解决方案 here .