d3自动空格重叠勾号标签 [英] d3 autospace overlapping tick labels

问题描述

d3中有没有办法不绘制重叠的刻度标签？例如，如果我有一个条形图，但酒吧只有5像素宽，标签是10像素宽，我最终与一个混乱的混乱。我目前正在一个实现，只有当它们不重叠时绘制标签。我找不到任何现有的方法来做，但不知道是否有其他人处理了这个问题。

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.

推荐答案

没有办法在D3中自动进行。您可以明确设置滴答数或滴答值（请参见文档），但你必须自己计算出相应的数字/值。另一种选择是旋转标签，使其重叠的机会较小。

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.

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

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.

这篇关于d3自动空格重叠勾号标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！