CODEWITHSUNDEEP
d3.js
Ashitaka
Ashitaka

Reputation: 19193

d3.js ticks function giving more elements than needed

I have this simple linear scale:

var x = d3.scale.linear().domain([0, 250]);

x.ticks(6), as expected, returns:

[0, 50, 100, 150, 200, 250]

However, x.ticks(11) returns:

[0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240]

When what I want is:

[0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250]

How do I fix this?

Upvotes: 1

Views: 3140

Answers (3)

tushar
tushar

Reputation: 791

  axis.tickvalues((function(last, values) {
    var myArray = [0];
    for(var i = 1; i < values; i++) {
      myArray.push(last*i/(values-1))
    }
    return myArray;
  })(250, 11));

This should give you an evenly spaced out array for specifying the number of tick values you want in a particular range.

Upvotes: 0

user1984773
user1984773

Reputation: 74

I had a similar issue with ordinal scales, I simply wrote some code to pick evenly spaced intervals in my data. Since I wanted it to always choose the first and last data element on the axis, I calculate the middle part only. Since some things do not divide evenly, rather than having the residual in one or two bins, I spread it out across the bins as I go; until there is no more residual.

There is probably a simpler way to accomplish this but here's what I did:

function getTickValues(data, numValues, accessor)
{
  var interval, residual, tickIndices, last, i;

  if (numValues <= 0)
  {
    tickIndices = [];
  }
  else if (numValues == 1)
  {
    tickIndices = [ Math.floor(numValues/2) ];
  }
  else
  {
    // We have at least 2 ticks to display.
    // Calculate the rough interval between ticks.
    interval = Math.floor(data.length / (numValues-1));

    // If it's not perfect, record it in the residual.
    residual = Math.floor(data.length % (numValues-1));

    // Always label our first datapoint.
    tickIndices = [0];

    // Set stop point on the interior ticks.
    last = data.length-interval;

    // Figure out the interior ticks, gently drift to accommodate
    // the residual.
    for (i=interval; i<last; i+=interval)
    {
      if (residual > 0)
      {
        i += 1;
        residual -= 1;
      }
      tickIndices.push(i);
    }
    // Always graph the last tick.
    tickIndices.push(data.length-1);
  }

  if (accessor)
  {
    return tickIndices.map(function(d) { return accessor(d); });
  }
  return tickIndices.map(function(i) { return data[i]; });
}

You call the function via:

getTickvalues(yourData, numValues, [optionalAccessor]);

Where yourData is your array of data, numvalues is the number of ticks you want. If your array contains a complex datastructure then the optional accessor comes in handy.

Lastly, you then feed this into your axis. Instead of ticks(numTicks) which is only a hint to d3 apparently, you call tickValues() instead.

I learned the hard way that your tickValues have to match your data exactly for ordinal scales. This may or may not be as helpful for linear scales, but I thought I'd share it anyways.

Hope this helps.

  • Pat

Upvotes: 2

chrtan
chrtan

Reputation: 1714

You can fix this by replacing the x.ticks(11) with your desired array.

So if your code looks like this and x is your linear scale:

chart.selectAll("line")
    .data(x.ticks(11))
    .enter()
    .append("line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", 0)
    .attr("y2",120)
    .style("stroke", "#CCC");

You can replace x.ticks(11) with your array:

var desiredArray = [0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250]
chart.selectAll("line")
    .data(desiredArray)
    .enter()
    .append("line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", 0)
    .attr("y2",120)
    .style("stroke", "#CCC");

The linear scale will automatically place your desired axes based on your input. The reason why the ticks() isn't giving you your desired separation is because d3 just treats ticks() as a suggestion.

Upvotes: 1

Related Questions