3

我正在使用基于此的条形图，并且我想修改 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; }));

...上面是映射发生的地方（我假设基于“地图”功能）

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 与其各自的列结婚（我的图表使用日期而不是州名）......有什么见解吗？

对不起这个混乱的问题。我欢迎那些了解我所要求的内容的人进行编辑，以使我的问题更加清楚（我不确定提出问题的最佳方式）。

4

1 回答 1

7

线

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

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

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

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

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

您可以在此处查看有效的解决方案。

于 2012-11-26T15:33:08.983 回答