d3.js - d3 autospace 重叠刻度标签

Question

d3 中有没有办法不绘制重叠的刻度标签？例如，如果我有一个条形图，但条形图只有 5 像素宽，而标签只有 10 像素宽，我最终会得到一团乱麻。我目前正在研究一种仅在标签不重叠时才绘制标签的实现。我找不到任何现有的方法来做到这一点，但不确定是否有其他人处理过这个问题。

Answer 1

在 D3 中无法自动执行此操作。您可以明确设置刻度数或刻度值（请参阅文档），但您必须自己找出相应的数字/值。另一种选择是旋转标签，以减少它们重叠的机会。

或者，就像其他答案中建议的那样，您可以尝试使用强制布局来放置标签。为了澄清，您将仅在标签上使用强制布局——这完全独立于图表的类型。我在这个例子中做到了这一点，这比另一个答案中链接的更相关。

请注意，如果您使用强制布局解决方案，则不必为标签的位置设置动画。您可以简单地计算力布局，直到它收敛，然后绘制标签。

Answer 2

我在多个（子）轴上遇到了类似的问题，在某些情况下，最后一个刻度与我的垂直轴重叠（取决于屏幕宽度），所以我刚刚写了一个比较结束位置的小函数文本标签的下一个轴的位置。此代码非常适合我的用例，但可以轻松适应您的需求：

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

});

带有的刻度color: aqua是隐藏的：