Проблемы с d3.scale.ordinal

У меня есть следующий код:

var dados = [
 ["Brasil", 20], 
 ["Canadá", 31],
 ["Japão", 29],
 ["USA", 126],
 ["Inglaterra", 81],
 ["Nova Zelândia", 25],
 ["Turquia", 34]
];
dados.sort(function(a, b) { return b[1] - a[1]; });
/* Chart Area */
var chart = d3.select("body").append("svg")
 .attr("class", "grafico")
 .attr("width", 700)
 .attr("height",300); 
/* Define X-axis */
var x = d3.scale.linear()
 .domain([0, d3.max(dados)[1] ])
 .range([0, 500]); 
/* Define Y-axis */
var domainY = dados.map(function(d) {return d[0];})
var y = d3.scale.ordinal()
 .domain(domainY)
 .rangeBands([0, 300]);
var yAxis = d3.svg.axis()
 .scale(y)
 .orient("left")
 .tickSize(0);
/* CALL Y-AXIS */
chart.append("g")
 .attr("class", "y axis")
 .call(yAxis)
 .attr("transform", "translate(120,0)");
/* DRAW BARS */
var bar = chart.selectAll("g.bar")
 .data(dados)
 .enter().append("g")
 .attr("class", "bar")
 .attr("transform", function(d) { return "translate(130,0)"; });
bar.append("rect")
 .attr("y", y)
 .attr("width", function(d) { return x(d[1]);} )
 .attr("height", y.rangeBand()-6);

МОЙ ВОПРОС

Когда я вызываю Y-AXIS после рисования BARS, y.domain() выглядит следующим образом:

["USA", "Inglaterra", "Turquia", "Canadá", "Japão", "Nova Zelândia", "Brasil", 
Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]

И категории (Y-AXIS) отображаются в парах NAME/VALUE:

USA,126 
 Inglaterra,81
 Turquia, 34
 Canadá,31
 Japão,29
 Nova Zelândia,25
 Brasil,20

Когда я вызываю Y-AXIS перед рисованием BARS, y.domain() выглядит одинаково, но категории правильно отображаются:

USA 
 Inglaterra
 Turquia
 Canada
 Japão
 Nova Zelândia
 Brasil

Я пробовал много изменений в домене без успеха. DomainY выглядит корректно, но после привязки данных к диаграмме происходит дублирование. Что я делаю неправильно?

1 ответ

Похоже, вы передаете неправильное значение своей y-шкале. Вместо attr("y", y) вам нужно сказать attr("y", function(d) { return y(d[0]); }).

licensed under cc by-sa 3.0 with attribution.