包裹后,如何在dc.js条形图的重新渲染中停止x轴标签?

时间:2019-09-20 08:57:08

标签: d3.js dc.js

我想在dc.js条形图中包装长标签。我已经能够找到用于包装标签的代码,但是在转换时重新呈现标签时遇到了问题。

请参阅下面的gif文件,标签一开始会正确包装,但是当我进行任何更改时,似乎会触发重新渲染(或重绘),从而将标签重新生成为初始状态。

我尝试过使用中的每个监听器 https://dc-js.github.io/dc.js/docs/html/dc.baseMixin.html#on__anchor 尝试在标签呈现之前将其包装,但这没有用。

问题的一个示例: Labels unwrapping

包装标签的功能,每行一个单词

    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是在其他位置定义的组合图

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


具有预转换:

enter image description here

代码

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)似乎触发了重新渲染,因此删除此代码可以解决问题。

0 个答案:

没有答案