d3.js - NVD3 水平条形图标签太长

Question

我有带有长标签的数据，即:

values:
  [      
    { x : "This is a really looong label", y : 40 },
    { x : "Short label", y : 30 } 
  ]

仅显示一小部分文本，其余部分隐藏

这是一个jsfiddle来演示这个问题。

理想情况下，我想为标签设置自定义宽度和/或使它们能够在溢出时使用多行。

这可能吗？

Answer 1

您想要做的事情可能超出了 nvd3 所编写的功能。

实际上，我刚刚找到了一种使用 d3 的方法，虽然有些困难，但也许可以应用于 nvd3。它涉及动态计算句子长度和大小，然后通过使用绝对和相对坐标定位计算出的段来包装它。请参阅此处的示例:

http://bl.ocks.org/mbostock/7555321

也就是说，当您想要获得这种级别的定制时，最好选择 d3。如果您在项目中使用 nvd3 来获取其他图表，则您已经可以访问 d3。网上有许多使用 d3 的水平条形图示例。例如，这里有 d3 创建者 Mike Bostock 的精彩教程，他将逐步引导您完成使用 d3 制作水平条形图所需的步骤:

http://bost.ocks.org/mike/bar/

以及使用 d3 的水平条形图的一些示例:

• http://jsfiddle.net/datashaman/rBfy5/4/light/
• http://bl.ocks.org/mbostock/1389927

即使使用 d3，您可以轻松访问底层 svg 引用，但很难将文本换行到 svg 中。事实上，大多数浏览器使用的 svg 版本甚至不支持 svg 文本换行。

要解决此限制，您可以使用我上面链接的方法，其中涉及动态计算句子长度，并使用坐标系动态定位 1 个或多个段。然而，最简单的方法可能是使用 foreignObject 元素将 HTML 元素嵌入到 svg 元素中。获得 HTML div 后，您可以轻松设置宽度，文本将自动换行。

有关如何执行此操作的更多详细信息:

Auto line-wrapping in SVG text

如果您在使用此方法使文本换行时遇到任何问题，请在另一个问题中询问，我很乐意为您提供帮助。