D3 - 没有图形出现

Question

我有一个名为final csv的变量，它看起来像是以CSV格式存储的。这些行由\ n分隔。我正在使用语句D3.csv.parse。任何人都可以告诉我，为什么页面上没有任何内容？ ： -

String, Float 
    value, 1 
    value2, 2 



function generateGraph(finalcsv) 
{ 
    var finaldata = finalcsv; 
    var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    var formatPercent = d3.format(".0"); 

    var x = d3.scale.ordinal() 
     .rangeRoundBands([0, width], .1, 1); 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .tickFormat(formatPercent); 

    var svg = d3.select(#body).append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    console.log(finaldata); 

    d3.csv.parse(finaldata, function(error, data) { 

     data.forEach(function(d) { 
     d.Float = +d.Float; 
     }); 

     x.domain(data.map(function(d) { return d.String; })); 
     y.domain([0, d3.max(data, function(d) { return d.Float; })]); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Integer"); 

     svg.selectAll(".bar") 
      .data(data) 
     .enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { return x(d.String); }) 
      .attr("width", x.rangeBand()) 
      .attr("y", function(d) { return y(d.Float); }) 
      .attr("height", function(d) { return height - y(d.Float); }); 
    }); 

} 

Answer 1

我迅速建立其似乎工作示例（或至少它表明的东西）：http://jsfiddle.net/frXRW/2/

与您所提供的代码中的第一个区别是，我没有使用d3.csv.parse()功能，我不知道你的问题是否来自那里，但我建议你看看文档，如果你的问题来自那里：https://github.com/mbostock/d3/wiki/CSV

我改变了第二件事，我怀疑是你的问题的根源是，你忘了把#body标识符设置在之间，所以它被认为是一个对象。因此，我只是改变了以下行：

var svg = d3.select(#body).append("svg") 

到

var svg = d3.select("#body").append("svg") 

如果这是你的问题，那么我会建议你使用JavaScript控制台，因为它给了以下错误正好指向铬上面的行：

Uncaught SyntaxError: Unexpected identifier