Question

d3js experts

I have these array

var dados = [
["Brasil", 20], 
["Canada", 31],
["Japao", 29],
["USA", 26],
["Inglaterra", 21],
["Nova Zelandia", 25],
["Turquia", 34]
];

I like to binding the array dados to my chart. Country Names to Texts and Values to Bars.

Is possible to do it directly? How to do it?

chart.selectAll("rect")
     .data(function(d, i) { return d[i][1];})
     .enter().append("rect")
     .attr("y", function(d) {return d[0];})
     .attr("width", x)
     .attr("height", y.rangeBand()-6)
     .attr("transform", "translate(4,0)");

chart.selectAll("text")
     .data(function(d, i) {return d[i][0];})
     .enter().append("text")
     ...

Thank you so much

---

I got the values with code bellow – in bold

 var x = d3.scale.linear()
     .domain([0, **d3.max(dados)[1]** ])
     .range([0, 500]);


 chart.selectAll("rect")
  .data(**dados**)
  .enter().append("rect")
  .attr("y", function(d) {return d[0];})
  .attr("width", **function(d) { return x(d[1]);}** )
  .attr("height", y.rangeBand()-6)
   .attr("transform", "translate(4,0)");

Answer 1

Correction inner ** **

 var x = d3.scale.linear()
    .domain([0, **d3.max(dados)[1]** ])
    .range([0, 500]);


 chart.selectAll("rect")
    .data(**dados**)
    .enter().append("rect")
    .attr("y", function(d) {return d[0];})
    .attr("width", **function(d) { return x(d[1]);}** )
    .attr("height", y.rangeBand()-6)
    .attr("transform", "translate(4,0)");