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

我有长标签的数据，即：

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

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

下面是一个例子来说明这个问题

理想情况下，我希望为标签设置一个自定义宽度，并且/或者如果标签溢出，使它们能够使用多行

这可能吗？

您想要做的事情可能超出了nvd3的书面能力

事实上，我刚刚发现了一种d3的方法，虽然有些困难，但它可能应用于nvd3。它包括即时计算句子长度和大小，然后通过使用绝对坐标和相对坐标定位计算的片段来包装句子。有关示例，请参见此处：

这就是说，当你想要获得这种定制级别时，最好使用d3。如果您在项目中为其他图表使用nvd3，则您已经可以访问d3。在线提供了许多使用d3的水平条形图示例。例如，这里是d3创建者Mike Bostock的一个很棒的教程，他在其中一步一步地介绍了使用d3制作水平条形图所需的步骤：

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

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

为了克服这个限制，您可以使用我上面链接的方法，它包括动态计算句子长度，并使用坐标系动态定位1个或多个片段。但是，最简单的方法可能是使用foreignObject元素在svg元素中嵌入HTML元素。一旦获得了HTML div，就可以轻松设置宽度，文本将自动换行

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

---

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

为什么不添加页边空白

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

---

答案可能很晚，但希望能有所帮助。我已经用了这个问题的例子

以下是我对您的代码所做的不同之处

将边距添加到图表中以使其美观：

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

最后，我选择了图表上的所有xAxis标记，并对其应用了函数换行

最终产量

示例的工作版本

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);
    }
  }
});