Я пытаюсь загрузить файл в формате JSON для использования в визуализации D3 плюс с помощью JQuery

Я пытаюсь создать boxplot с помощью D3plus и загрузки/хранения данных JSON в переменную с JQuery:Я пытаюсь загрузить файл в формате JSON для использования в визуализации D3 плюс с помощью JQuery

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <script src="./JS/d3.min.js"></script> 
    <script src="./JS/d3plus.min.js"></script> 
    <script src="./JS/jQuery.min.js"></script> 
</head> 
<body> 

<div id="viz"></div> 

<script> 
    var data; 

    $.getJSON("./Data/boxplot.json", function(json) { 
     data = json; 
    }); 
    var visualization = d3plus.viz() 
    .container("#viz") 
    .data(data) 
    .type("box") 
    .id("name") 
    .x("building") 
    .y("total") 
    .time(false) 
    .height(800) 
    .ui([{ 
     "label": "Visualization Type", 
     "method": "type", 
     "value": ["scatter","box"] 
     }]) 
    .draw() 
</script> 

</body> 
</html>

Если я копирую и прошлю данные json в файл, он работает. Однако, когда я пытаюсь извлечь данные из внешнего json-файла, хранящегося в папке «Данные», это не сработает. Я получаю сообщение об ошибке: «Визуализации Box Plot требуют установки метода« данных ».

Вот моя структура файла:

Вот мой JSON файл:

[{"building":"MMB","name":"Shane","total":1},{"building":"MMB","name":"Geneviève, Bérubé","total":1},{"building":"MMB","name":"Dana","total":10},{"building":"MMB","name":"karine","total":2},{"building":"MMB","name":"Anthony","total":1},{"building":"MMB","name":"Erwin","total":6},{"building":"MMB","name":"Jake","total":2}, 
{"building":"MMB","name":"Karen","total":1},{"building":"MMB","name":"sabrina","total":2},{"building":"MMB","name":"Jeannine","total":4}]

Большое спасибо за ваше время!

EDIT:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <script src="./JS/d3.min.js"></script> 
    <script src="./JS/d3plus.min.js"></script> 
    <script src="./JS/jQuery.min.js"></script> 
</head> 
<body> 

<div id="viz"></div> 

<script> 

$.getJSON("./Data/boxplot.json", function(json) { 
    data = json, 
    success = function(data){ 
    .container("#viz") 
    .data(data) 
     .type("box") 
     .id("name") 
     .x("building") 
     .y("total") 
     .time(false) 
     .height(800) 
     .ui([{ 
      "label": "Visualization Type", 
      "method": "type", 
      "value": ["scatter","box"] 
     }]) 
     .draw() 
    } 
}) 
</script> 

</body> 
</html>

источник

2016-10-10 Johnathan

Возможный дубликат [Как вернуть ответ от асинхронного вызова?] (http://stackoverflow.com/questions/14220321/how-do-return-the-response-from-an-asynchronous-call) –

$ .getJSON является асинхронным - поэтому данные не будут заполняется до тех пор, пока после этого кода после запуска вызова getJSON –

$.getJSON("./Data/boxplot.json", function(json) { 
    data = json, 
    success = function(data){ 
    d3plus.viz() 
     .container("#viz") 
     .data(data) 
     .type("box") 
     .id("name") 
     .x("building") 
     .y("total") 
     .time(false) 
     .height(800) 
     .ui([{ 
      "label": "Visualization Type", 
      "method": "type", 
      "value": ["scatter","box"] 
     }]) 
     .draw() 
    } 
})

Нечто подобное должно работать. Значение «success» после вашего вызова getJSON является функцией, которая будет вызываться после возврата асинхронного ответа (таким образом, параметр data, который передается функции). Не проверял, что работает D3, но это должно решить проблему вызова AJAX.

источник

2016-10-10 00:24:57 larz

D3plus поддерживает загрузку данных из файлов JSON. Просто пройти путь к методу данных:

var visualization = d3plus.viz() 
    .container("#viz") 
    .data("./Data/boxplot.json") 
    .type("box") 
    .id("name") 
    .x("building") 
    .y("total") 
    .time(false) 
    .height(800) 
    .ui([{ 
     "label": "Visualization Type", 
     "method": "type", 
     "value": ["scatter","box"] 
     }]) 
    .draw();

И для справки, здесь все пользовательские свойства, которые могут быть установлены для метода данных: https://github.com/alexandersimoes/d3plus/wiki/Visualizations#data

источник

2017-04-23 18:21:13

Я пытаюсь загрузить файл в формате JSON для использования в визуализации D3 плюс с помощью JQuery

ответ

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