试图从csv获取值到双面水平条形图

Question

我是d3.js的新手，正在尝试创建自己的双面条形图。它所基于的图表是http://jasonneylon.wordpress.com/2013/09/05/two-sided-horizontal-barchart-using-d3-js/ 每当我跑步时，我总是拿出一个空白的屏幕，我不确定我做错了什么。

var names = [];
var total = [];
var otherValue = [];

d3.text("results.csv",function(data){
var data = d3.csv.parseRows(data);

for( var a = 1;a <data.length;a++){
    var names.push(data[a][0]);
    var total.push(parseFloat(data[a][1]));
    var otherValue.push(parseFloat(data[a][2]));    
}




  var labelArea = 160;

  var chart,
      width = 400,
      bar_height = 20,
      height = bar_height * (data.length);

  var rightOffset = width + labelArea;

  var chart = d3.select("body")
    .append('svg')
    .attr('class', 'chart')
    .attr('width', labelArea + width + width)
    .attr('height', height);

  var xFrom = d3.scale.linear()
     .domain([0, d3.max(otherValue)])
     .range([0, width]);

  var y = d3.scale.ordinal()
     .domain(names)
     .rangeBands([10, height]);

  var yPosByIndex = function(d, index){ return y(index); } 


  chart.selectAll("rect.left")
    .data(otherValue)
    .enter().append("rect")
    .attr("x", function(pos) { return width - xFrom(pos); })
    .attr("y", yPosByIndex)
    .attr("class", "left")
    .attr("width", xFrom)
    .attr("height", y.rangeBand()); 

  chart.selectAll("text.leftscore")
    .data(otherValue)
    .enter().append("text")
    .attr("x", function(d) { return width - xFrom(d); })
    .attr("y", function(d, z){ return y(z) + y.rangeBand()/2; } )
    .attr("dx", "20")
    .attr("dy", ".36em")
    .attr("text-anchor", "end")
    .attr('class', 'leftscore')
    .text(String);

  chart.selectAll("text.name")
    .data(names)
    .enter().append("text")
    .attr("x", (labelArea / 2) + width)
    .attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
    .attr("dy", ".20em")
    .attr("text-anchor", "middle")
    .attr('class', 'name')
    .text(String);


  var xTo = d3.scale.linear()
     .domain([0, d3.max(total)])
     .range([0, width]);

  chart.selectAll("rect.right")
    .data(total)
    .enter().append("rect")
    .attr("x", rightOffset)
    .attr("y", yPosByIndex)
    .attr("class", "right")
    .attr("width", xTo)
    .attr("height", y.rangeBand()); 
});
  chart.selectAll("text.score")
    .data(total)
    .enter().append("text")
    .attr("x", function(d) { return xTo(d) +  rightOffset; })
    .attr("y", function(d,z){ return y(z) + y.rangeBand()/2; } )
    .attr("dx", -5)
    .attr("dy", ".36em")
    .attr("text-anchor", "end")
    .attr('class', 'score')
    .text(String);
  });

</script>

使用3个阵列是一个不同的想法，我试图找不到我迄今发现的任何东西。

csv文件如下所示：

ABC,140,35
DEF,164,45
GHI,89,15
JKL,56,20
MNO,20,31

感谢您的帮助