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, как он дал следующую ошибку, указывая именно на line:

Uncaught SyntaxError: Unexpected identifier