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的几个水平条形图示例：

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

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

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

Auto line-wrapping in SVG text

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

Answer 2

答案可能是迟到但希望它有所帮助。我在问题中使用了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该示例的工作版本。

Answer 3

为什么不直接添加保证金？

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

NVD3水平条形图标签太长

3 个答案: