d3 autospace重叠刻度标签

Question

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

Answer 1

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

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

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

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的蜱是隐藏的：

Answer 3

你可以试试this线程中提到的东西，特别是this example，这样标签就可以向上/向下/向外推，这样它们都可以装入。这需要使用单独的力，一个用于节点，另一个用于标签他们自己。