d3 javascript: чтение файла json

Я хочу написать фрагмент кода в d3js, который будет читать json-файл, и отображать простую гистограмму на основе содержимого json-файла. Мой файл JSON, mydata.json, является:d3 javascript: чтение файла json

[ 
    {“name”: “Apollo_Diomedes”, “age”: 300}, 
    {“name”: “Bjorn_the_Fellhanded”, “age”: 900}, 
    {“name”: “Jonah_Orion”, “age”: 500} 
]

d3js фрагмент кода из index.html:

<body> 
<script> 
d3.json("mydata.json", function(data) { 

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

    canvas.selectAll("rect") 
     .data(data) 
     .enter() 
      .append("rect") 
      .attr("width", function(x) { return x.age; }) 
      .attr("height", 45) 
      .attr("y", function(x, i) { return i * 50; }) 
      .attr("fill", "blue") 
    }); 
</script> 
</body>

Я использую d3 v4: <script src="http://d3js.org/d3.v4.js"></script>.

Я попытался открыть файл index.html и открыть локальный сервер и перейти на localhost:8080 по указанию here; оба просто показывают мне пустой экран. Оба index.html и mydata.json сохраняются в той же папке на моем рабочем столе.

Для интересующихся это на самом деле this слегка устаревший учебник по youtube; он запускает d3 v3.

P.S. Я могу читать информацию из CSV, но не json.

источник

2017-02-22 AndreyIto

у вас есть проблемы с синтаксический анализ данных JSON. Проблема заключается в ваших форматированных данных JSON не так, как вы это называете. Я просто заменю ваш «с», и он отлично работает '[ {" name ":" Apollo_Diomedes "," age ": 300} , {"name": "Bjorn_the_Fellhanded", "age": 900}, {"name": "Jonah_Orion", "age": 500} ] ' –

Похоже, что у вас проблемы с разбором данных JSON. Попробуйте заменить свои кавычки на английские (").

И вообще, всегда проверять журнал консоли вашего веб-браузера. Я уверен, что вы будете печататься там какая-то ошибка.

источник

2017-02-26 15:24:00

d3 javascript: чтение файла json

ответ

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