Javascript 尝试将csv中的值输入双面水平条形图

Javascript 尝试将csv中的值输入双面水平条形图,javascript,d3.js,Javascript,D3.js,我是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

我是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>

感谢您的帮助

代码似乎有额外的
})
。运行此操作时,您是否在控制台上看到任何错误?@music\u ut thanking去掉了额外的括号集。控制台在
var names.push(数据[a][0])的行中给出错误“Uncaught SyntaxError:Unexpected token.”这确实是不正确的Javascript。您不需要该行上的
var
,它后面的行也不需要。网上有一些资源可以向您简要介绍Javascript语言。我建议你读一次,它们会让你调试起来更容易。@music\u再次感谢,现在工作很好。我们将进一步查找Javascript。
ABC,140,35
DEF,164,45
GHI,89,15
JKL,56,20
MNO,20,31