Javascript 如何将标签换行功能添加到NVD3图形？

如何将Mike Bostock（）的标签换行函数添加到我的nvd3图形中

createChart(graph_data, tickValue){
    if (graph_data) {
        var chart;

        nv.addGraph(function () {
            var chart = nv.models.multiBarChart()
                    .reduceXTicks(false)   //If 'false', every single x-axis tick label will be rendered.
                    .rotateLabels(-45)      //Angle to rotate x-axis labels.
                    .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
                    .groupSpacing(0.15)    //Distance between each group of bars.
                ;
            chart.xAxis
                .tickFormat(function (i) {
                    return tickValue[i];
                });

            chart.yAxis
                .tickFormat(d3.format(',.1f'));

            d3.select('#chart1')
                .datum(graph_data)
                .call(chart);

            return chart;
        });
    } else {
        return <div/>
    }
}

createChart（图形数据，tickValue）{
if（图形_数据）{
var图；
nv.addGraph（函数（）{
var chart=nv.models.multiBarChart（）
.ReduceTexticks（false）//如果为“false”，则将呈现每个x轴刻度标签。
.rotateLabels（-45）//旋转x轴标签的角度。
.showControls（true）//允许用户在“分组”和“堆叠”模式之间切换。
.groupSpacing（0.15）//每组钢筋之间的距离。
;
chart.xAxis
.1格式（函数（i）{
返回值[i]；
});
图1.yAxis
.tickFormat（d3.format（'，.1f'））；
d3.选择（“#图表1”）
.基准（图形和数据）
.电话（图表）；
收益表；
});
}否则{
返回
}
}

tickValue[i]

返回字符串，如“调用以获取详细信息、首选项和建议车辆”

我需要包装这个字符串，这样它才能适合我的图表

我尝试使用wrap function（），但无法像d3和nvd3那样使用

谢谢。

下面是我如何用这个例子回答这个问题的

我用了一个我在另一篇文章中回答的例子。示例的工作版本

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

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

最终产量



希望能有所帮助
以下是我如何用这个例子来回答这个问题

我用了一个我在另一篇文章中回答的例子。示例的工作版本

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

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

最终产量



希望它对nvd3 1.8.5版（我不知道旧版本）有所帮助，这已经实现了。只用

wrapLabels: true

在nvd3版本1.8.5（我不知道旧版本）中，这已经实现了。只用

wrapLabels: true