在nvd3.js图形x轴标签

Question

所以我一直试图找到一种在我的nvd3图形的x轴标签中创建新线条的方法，但到目前为止似乎没有任何工作。我已经提到了这两个问题：Newline in labels in d3 charts和nvd3 chart axis label，但没有找到足够的答案，因为这些都与d3.js图有关。他们都有关于使用tspan创建新线的答案，但无论我玩多少，它似乎都不适合我。这就是我现在所拥有的，但它似乎并不正确......任何帮助都将不胜感激！

＆＃13;

＆＃13;

nv.addGraph(function () {
var chart = nv.models.multiBarChart().stacked(false).showControls(false);

chart.x(function (d) { return d.x; });
chart.y(function (d) { return d.y; });

chart.yAxis
	.axisLabel('Jobs')
//Too many bars and not enough room? Try staggering labels.
chart.staggerLabels(true); 
chart.margin().left = 70;
//chart.showValues(true);

var tech_data = technicianReport();

console.log(tech_data[1] + " " + tech_data[2])

$("#date_range").text(tech_data[1] + " - " + tech_data[2]);
$("#tech_title").text("Technician-Advisor Actions");

d3.select('#tech_chart svg')
	.datum(tech_data[0])
	.transition().duration(500).call(chart);

var insertLinebreaks = function (d) {
	var el = d3.select(this).text();
	var words = d.description.split('\n');
	el.text('');

	for (var i = 0; i < words.length; i++) {
		var tspan = el.append('tspan').text(words[i]);
		if (i > 0)
			tspan.attr('x', 0).attr('dy', '15');
	}
};

svg = d3.select("tech_chart svg");
svg.selectAll('g.x.axis g text').each(insertLinebreaks);

nv.utils.windowResize(function () { chart.update() });
return chart;
});

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用最新的nvd3源（1.8.1-dev）中的.wrapLabels参数该参数包装长x轴标签。比较两个截图

所以你会想出

chart.wrapLabels(true);