Question

我是d3和nvd3的新手，在下面的代码中，我想将长标签包装成多行，我跟着 mbostock’s article编写如下代码，我遇到了问题，我不知道如何访问aAxis的rangeBand（），如果我将其更改为硬编码数字30，则效果很好。< / p>

我想用x.rangeBand（）之类的代码替换硬编码的数字30，我在这里尝试了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();
                            }
                        });
                    }

Answer 1

目前在NVD3 source：

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

添加Mike Bosctocks solution，试试这个：

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

chart.xAxis.scale(x)

希望它有所帮助。

如何在NVD3中获取aAxis的rangeBand（）

1 个答案: