CODEWITHSUNDEEP
d3.jslabelspacing
Jeff Storey
Jeff Storey

Reputation: 57192

d3 autospace overlapping tick labels

Is there a way in d3 to not draw overlapping tick labels? For example, if I have a bar chart, but the bars are only 5 pixels wide and the labels are 10 pixels wide, I end up with a cluttered mess. I'm currently working on an implementation to only draw the labels when they do not overlap. I can't find any existing way to do that, but wasn't sure if anyone else had dealt with this problem.

Upvotes: 13

Views: 13038

Answers (4)

Victor Gunta
Victor Gunta

Reputation: 1

Based on David's answer i made it work like this:

export const removeOverlappingHorizontalTicks = (group, selector: string) => {
  const a = group.selectAll(selector).nodes();
  if (a.length <= 1) return;
  for (let i = 0, x = 0; i < a.length; ) {
    const node = a[i++];
    const r = node.getBoundingClientRect();
    if (r.left < x) {
      node.parentNode.removeChild(node);
    } else {
      x = r.right + 8;
    }
  }
};

Where the group is a svg group and selector is a CSS selector for the xAxis. In my case, i call it like this:

removeOverlappingHorizontalTicks(group, ".axis-x .tick text");

Upvotes: 0

David Tinker
David Tinker

Reputation: 9634

I wrote a function to remove ticks overlapping with the previous tick:

function removeOverlappingXTicks(axis) {
  let a = axis.selectAll("g.tick").nodes()
  if (a.length <= 1) return
  for (let i = 0, x = 0; i < a.length; ) {
    let node = a[i++]
    let r = node.getBoundingClientRect()
    if (r.left < x) node.parentNode.removeChild(node)
    else x = r.right + 8
  }
}

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

There is no way of doing this automatically in D3. You can set the number of ticks or the tick values explicitly (see the documentation), but you'll have to figure out the respective numbers/values yourself. Another option would be to rotate the labels such that there is less chance of them overlapping.

Alternatively, like suggested in the other answer, you could try using a force layout to place the labels. To clarify, you would use the force layout on the labels only -- this is completely independent of the type of chart. I have done this in this example, which is slightly more relevant than the one linked in the other answer.

Note that if you go with the force layout solution, you don't have to animate the position of the labels. You could simply compute the force layout until it converges and then plot the labels.

Upvotes: 11

Slevin
Slevin

Reputation: 4222

I've had a similar problem with multiple (sub-)axis, where the last tick overlaps my vertical axis in some situations (depending on the screen width), so I've just wrote a little function that compares the position of the end of the text label with the position of the next axis. This code is very specific to my use case, but could adapted easily to your needs:

var $svg = $('#svg');

// get the last tick of each of my sub-axis
$('.tick-axis').find('.tick:last-of-type').each(function() {

  // get position of the end of this text field
  var endOfTextField = $(this).offset().left + $(this).find('text').width();

  // get the next vertical axis
  var $nextAxis = $('line[data-axis="' + $(this).closest('.tick-axis').attr('data-axis') + '"]');

  // there is no axis on the very right, so just use the svg width
  var positionOfAxis = ($nextAxis.length > 0) ? $nextAxis.offset().left : $svg.offset().left + $svg.width();

  // hide the ugly ones!
  if (endOfTextField > positionOfAxis) {
    $(this).attr('class', 'tick hide');
  }

});

The ticks with color: aqua are the hidden ones:

enter image description here

Upvotes: 1

Related Questions