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

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

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

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

当轴标签作为比例域的一部分进行映射时，如何在堆叠条形图中修改d3中的轴标签

1 个答案: