d3 autospace 重叠刻度标签答案

【问题标题】：d3 autospace overlapping tick labelsd3 autospace 重叠刻度标签
【发布时间】：2013-07-21 18:28:57
【问题描述】：

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

【问题讨论】：

标签： d3.js label spacing

【解决方案1】：

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

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

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

【讨论】：

可以通过将您链接到的示例的相关内容包含在答案本身中来改进此答案。否则，当链接失效时，答案将失去价值。

【解决方案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 的记号是隐藏记号：

【讨论】：