Как получить RangeBand() от оси в NVD3

Я новичок в d3 и nvd3, в приведенном ниже коде, я хочу обернуть длинные метки в несколько строк, я следовал статье mbostock, чтобы написать код, как показано ниже, и у меня возникла проблема, я не знаю, как получить доступ к rangeBand() оси, если я поменяю его на жестко закодированное число 30, это сработало хорошо.

я хочу заменить жестко закодированное число 30 кодом, подобным x.rangeBand(), я пробовал chart.xScale().rangeBand() и chart.aAxis.scale.rangeBand(), но оба они не работали.

Кто-нибудь может помочь в этом?

nv.addGraph(function () {
    var chart = nv.models.multiBarChart()
                        .margin({bottom: 20})
                        .stacked(true)
                        .showControls(false)
                        .reduceXTicks(false)
                        .yDomain([0, maxY])
                        .tooltipContent(function (key, x, y, e) {
                            if (e.value >= 0) {
                                return '<h3>' + key + '</h3>' +
                                    '<p>' + y + ' at ' + x + '</p>';
                            } else {
                                return '';
                            }
                        });
    ...
    d3.select(element.find('#general')[0])
                        .datum(generalChartData)
                        .transition().duration(500)
                        .call(chart)
                        .selectAll('.tick text')
                        .call(wrap, 30); // here i want to use code like x.rangeBand()

    function wrap(text, width) {
                        text.each(function() {
                            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');
                            word = words.pop();
                            while (word) {
                                line.push(word);
                                tspan.text(line.join(' '));
                                if (tspan.node().getComputedTextLength() > width) {
                                    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);
                                }
                                word = words.pop();
                            }
                        });
                    }

1 ответ

Решение

На данный момент в источнике NVD3:

x = multibar.xScale();
chart.xAxis.scale(x)

Добавив решение Mike Bosctocks, попробуйте это:

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, .3);

chart.xAxis.scale(x)

Надеюсь, поможет.

Другие вопросы по тегам