Рисунок D3 Прямоугольники

Я начинаю с D3 и JS в целом. Я пытаюсь сделать простую прямоугольную визуализацию с небольшим CSV-файлом в качестве источника.Рисунок D3 Прямоугольники

price, units 
80.67, 100 
80.87, 99 
79.34, 47

Файл, csv находятся в той же папке. Я использую SimpleHTTPServer Python для локального размещения в этой папке.

Это мой код:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test Data</title> 
    <script type="text/javascript" src="../d3/d3.v3.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 

     // load csv from the same directory 
     d3.csv("test.csv", function (data){ 

      return { 
         price: +data.price, // convert to number with + 
         units: +data.units, // convert to number with +   
      }; 

      var canvas = d3.select("body").append("svg") 
       .attr("width", 500) 
       .attr("height", 500) 

      canvas.selectAll("rect") 
       .data(data) 
       .enter() 
        .append("rect") 
        .attr("width", function (d) { return d.price; }) 
        .attr("height", 48) 
        .attr("y", function (d) { return d.units; }) 
        .attr("fill", "blue"); 

      canvas.selectAll("text") 
       .data(data) 
       .enter() 
        .append("text") 
        .attr("fill", "white") 
        .attr("y", function (d) { return d.units + 24; }) 
        .text(function (d) { return d.units;}) 


      }); 



    </script> 
</body>

Я не подвожу никаких ошибок, просто пустая страница. Что не так с этим кодом?

источник

2014-01-06 user1766682

Первое, что вы делаете в своем обратном вызове, - это вернуться. Ни один из кода после этого не выполняется. Я имею в виду

return { 
        price: +data.price, // convert to number with + 
        units: +data.units, // convert to number with +   
     };

, который, вероятно, должен быть

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

Подпись обратного вызова также должен быть function(error, data) вместо function(data).

источник

2014-01-06 15:56:19

Я заменил свое возвращение вашими данными.forEach и добавил функцию (ошибка, данные). Теперь я получаю сообщение об ошибке «Ошибка: недопустимое значение для атрибута y =« NaN », а html показывает только один прямоугольник вместо трех. – user1766682

Вы проверили правильность анализа CSV? –

О, да, спасибо! После проверки csv я понял, что у меня есть пробел между запятой и значением: например: 80.67, 100. После удаления пространства у меня есть: 80.67,100, и теперь он работает. Но я все еще озадачен тем, почему это пространство вызывает ошибку. – user1766682

Рисунок D3 Прямоугольники

ответ

Смежные вопросы