Как я могу остановить повторную визуализацию надписей оси x в гистограмме dc.js после переноса? - PullRequest
Новая
       34

Как я могу остановить повторную визуализацию надписей оси x в гистограмме dc.js после переноса?

1 голос
/ 20 сентября 2019

Я хочу обернуть длинные метки в гистограмму dc.js.Мне удалось найти код для переноса меток, но у меня возникла проблема с повторным рендерингом меток при переходах.

См. Рисунок ниже, метки правильно упакованы для начала,но когда я делаю какие-либо изменения, кажется, что запускается повторный рендеринг (или перерисовка), который заново генерирует метки в их исходное состояние.

Я пытался использовать каждого из слушателей в 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) вызывает повторную визуализацию, поэтому устранение этой проблемы решило проблему.

...