Ошибка: <rect>высота атрибута: ожидаемая длина, "NaN" - PullRequest
0 голосов
/ 13 сентября 2018

Я пытаюсь сделать гистограмму, используя данные, загруженные с сайта ВОЗ, в документ Excel. Мой .csv как есть (пробовал как с, так и без ")

"WHO_region","percentage"
"Africa",52.2
"Americas",83
"South-East Asia",75.1
"Europe",75.1
"Eastern Mediterranean",63.6
"Western Pacific",89.7

Я пытаюсь использовать процентный столбец, чтобы определить высоту моих баров, я вытащил "процент", чтобы он представлял собой собственную переменную, пока я играю с ним, так как он немного чище? Ничего не работает - не parseFloat, parseInt и т. Д.? Почему это может быть? Полный код ниже:

<script type="text/javascript">

    //declare global variables 
    var w = 600, h = 200, padding = 30, margin = 30;

    //import the .csv data
    d3.csv("WHO_familyplanningdata.csv", function(data) {
            console.log(data)});

    //create the SVG
    var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    //import the .csv data
    d3.csv("WHO_familyplanningdata.csv", function(data) {
            console.log(data); 

    //clean up data
    var percent = parseInt(data.percentage)

    //create rects, and add them to the SVG 
    svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", function(d,i) {
                    return i * (w / data.length);
            }) //distributes them across the x axis 
            .attr("y", 0)
            .attr("width", (w / data.length) /2)
            .attr("height", function(d, i) { 
                    return percent;
            });

 }); //end of the data wrapping 
   </script>

Любая помощь очень ценится - спасибо! :)

...