I have the following code:

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);

MY QUESTION

When I call Y-AXIS after draw BARS the y.domain() looks like this:

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

And the categories (Y-AXIS) are plotted in pairs NAME/VALUE:

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

When I call Y-AXIS before draw BARS the y.domain() looks the same, but the categories are correctly plotted:

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

I tried many changes on Domain without success. The domainY looks correct but after binding data to chart the duplication occurs. What am I doing wrong?

I have the following code:

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);

MY QUESTION

When I call Y-AXIS after draw BARS the y.domain() looks like this:

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

And the categories (Y-AXIS) are plotted in pairs NAME/VALUE:

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

When I call Y-AXIS before draw BARS the y.domain() looks the same, but the categories are correctly plotted:

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

I tried many changes on Domain without success. The domainY looks correct but after binding data to chart the duplication occurs. What am I doing wrong?

• javascript
• charts
• axis
• d3.js

Share Improve this question Follow edited Aug 28, 2013 at 22:01 Jason Sundram 12.6k2020 gold badges7272 silver badges8686 bronze badges asked Aug 30, 2012 at 16:55 PauloPaulo 8511 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Looks like you're passing the wrong value to your y-scale. Instead of attr("y", y) you need to say attr("y", function(d) { return y(d[0]); }).