NVD3 水平条形图标签太长答案

【问题标题】：NVD3 Horizontal Bar Chart labels too longNVD3 水平条形图标签太长
【发布时间】：2014-10-24 11:07:46
【问题描述】：

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

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

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

这里有一个jsfiddle 来演示这个问题。

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

这可能吗？

【问题讨论】：

标签： d3.js nvd3.js

【解决方案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 的水平条形图示例：

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

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

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

Auto line-wrapping in SVG text

如果您在使用这种方法换行时遇到任何问题，请在另一个问题中提出相关问题，我们很乐意为您提供帮助。

【讨论】：

【解决方案2】：

为什么不只添加边距？

var chart = nv.models.multiBarHorizontalChart()
               .margin({top: 30, right: 20, bottom: 50, left: 175});

【讨论】：

【解决方案3】：

答案可能会迟到，但希望对您有所帮助。我在问题中使用了Mike Bostock’s Wrapping long labels 示例。

这是我对您的代码所做的不同之处。

为图表添加边距以使其美观：

var chart = nv.models.multiBarHorizontalChart().margin({
  top: 30, right: 20, bottom: 50, left: 100
});

最后，我选择了图表上的所有xAxis 刻度并将Mike Bostock’s Wrapping long labels function wrap 应用到它。

d3.selectAll(".nv-x.nv-axis .tick text").each(function(i, e) {
  var text = d3.select(this),
    words = text.text().split(/\s+/).reverse(),
    word, line = [],
    lineNumber = 0,
    lineHeight = 1.1, // ems
    y = text.attr("y"),
    dy = parseFloat(text.attr("dy")),
    tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");

  while (word = words.pop()) {
    line.push(word);
    tspan.text(line.join(" "));
    // TDOD : Make 80 a dynamic value based on the bar width/height
    if (tspan.node().getComputedTextLength() > 80) {
      line.pop();
      tspan.text(line.join(" "));
      line = [word];
      tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
    }
  }
});

最终输出

Here's 示例的工作版本。

【讨论】：