我想在dc.js条形图中包装长标签。我已经能够找到用于包装标签的代码,但是在转换时重新呈现标签时遇到了问题。
请参阅下面的gif文件,标签一开始会正确包装,但是当我进行任何更改时,似乎会触发重新渲染(或重绘),从而将标签重新生成为初始状态。
我尝试过使用中的每个监听器 https://dc-js.github.io/dc.js/docs/html/dc.baseMixin.html#on__anchor 尝试在标签呈现之前将其包装,但这没有用。
function wrap(text_orig, width, chart_id) {
Array.prototype.forEach.call(text_orig._groups[0], function (x) {
var text = select(x)
var all_tspans = text.selectAll('tspan').size()
console.log('all_tspans:', all_tspans)
if(all_tspans > 1){
return;
}
var words = text.text().split(/\s+/).reverse()
var word
var lineNumber = 0
var lineHeight = 1.1 // ems
var y = text.attr("y")
var dy = parseFloat(text.attr("dy"))
var tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em")
while (word = words.pop()) {
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", lineNumber * lineHeight + dy + "em").text(word);
++lineNumber;
}
});
}
barChartTemplate
.dimension(dimension)
.group(group)
.x(scaleBand().domain(dimension))
.xUnits(dc.units.ordinal)
.elasticX(true)
.elasticY(true)
.on('renderlet', function(d){
selectAll("#" + chartSettings.id + " g.x.axis .tick text")
.call(wrap, 1, chartSettings.id);
})
barChartTemplate
.dimension(dimension)
.group(group)
// .ordering(function(d) { return -d.value.n; })
.x(scaleBand().domain(dimension))
.xUnits(dc.units.ordinal)
.elasticX(true)
.elasticY(true)
.on('pretransition', function(d){
selectAll("#" + chartSettings.id + " g.x.axis .tick text")
.call(wrap, 1, chartSettings.id);
})
根据下面的戈登的回复,.elasticX(true)似乎触发了重新渲染,因此删除此代码可以解决问题。