javascript - How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale&#3

admin管理员组

文章数量:1433161

I am working with a bar chart that was based off of this, and I want to modify the x-axis labels (either rotate them or only show every other or every third...something that will allow me to fit labels without their overlapping). I've spent quite a bit of time looking into this, but it seems easier said than done (although I am pretty new to d3). I believe the code segments that are in question are among these:

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

...above is where the mapping happens (I assume based on the 'map' function)

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

The problem is that I don't necessarily want an x-axis label for every bar in the chart (it gets too cluttered). I have already tried several different ways of using

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

but I think they fail because d.State is married to its respective column (my graph uses dates instead of the name of a state)...any insight?

Sorry for the messy question. I wele edits by those who understand what I'm asking to make my question more clear (I'm not sure of the best way to ask it).

I am working with a bar chart that was based off of this, and I want to modify the x-axis labels (either rotate them or only show every other or every third...something that will allow me to fit labels without their overlapping). I've spent quite a bit of time looking into this, but it seems easier said than done (although I am pretty new to d3). I believe the code segments that are in question are among these:

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

...above is where the mapping happens (I assume based on the 'map' function)

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

The problem is that I don't necessarily want an x-axis label for every bar in the chart (it gets too cluttered). I have already tried several different ways of using

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

but I think they fail because d.State is married to its respective column (my graph uses dates instead of the name of a state)...any insight?

Sorry for the messy question. I wele edits by those who understand what I'm asking to make my question more clear (I'm not sure of the best way to ask it).

• javascript
• d3.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 21, 2012 at 23:14 MuffinTheManMuffinTheMan 1,5812020 silver badges2727 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The line

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

Is setting the domain for the scale that the axis uses. Because the scale is ordinal the axis defaults to using all the values for ticks. You should be able to set the actual tick values using the axis.tickValues function you mention above. You will just have to set it after the call that sets the scale domain because I suspect setting the domain resets the tickValues. Simply add something like:

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

Here I am mapping the data data to a single array of selected State values interspersed with "undefined" and then filtering out all the undefineds. The remaining State values bee the ticks.

If you are using underscore you can probably make the line a lot prettier.

You can see the working solution here.

本文标签：