Как получить 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)
Надеюсь, поможет.