Очень простой учебник, например, Д3.js не работает

Question

Очень простой учебник, например, Д3.js не работает

Я вроде как новичок в D3.JS. Я читаю начало работы с D3 Майка Дьюара. Я попробовал самый первый пример в книге, и он не работает. Я из-за этого всю душу вырываю. Что не так с моим кодом здесь?

В разделе <head>:

<script src="http://mbostock.github.com/d3/d3.js"></script>

<script>

   function draw(data) {

    "use strict";

   d3.select("body")

      .append("ul")

      .selectAll("li")

      .data(data)

      .enter()

      .append("li")

         .text(function (d) {

            return d.name + ": " + d.status;

         });

      }

</script>

В <body>:

<script>



    d3.json("flare.json", draw);



</script>

И файл JSON:

[

{

    "status": ["GOOD SERVICE"],

    "name": ["123"],

    "url": [null],

    "text": ["..."],

    "plannedworkheadline": [null],

    "Time": [" 7:35AM"],

    "Date": ["12/15/2011"]

}

]

438 4

javascript

4 ответов:

Comments

Ничего не найдено.

d3noob · Accepted Answer · 2013-02-06 18:58:55

Если вы используете Chrome, это может помешать вам правильно открыть файл из-за ограничений безопасности между доменами. Попробуйте Firefox, чтобы увидеть, если это так (это, вероятно, позволит вам загрузить файл правильно).

Если это проблема, вы захотите установить локальный веб-сервер, такой как WAMP (если вы используете Windows), или следуйте инструкциям на странице wiki здесь: https://github.com/mbostock/d3/wiki

Удачи

mg1075 · Accepted Answer · 2017-04-13 15:13:41

Вы проверили консоль браузера, чтобы узнать, есть ли ваш запрос XHR удалось ли это?

Когда я пытаюсь запустить код на своей машине, с локальной версией d3 (v3) в VS 2012 Express, запрос XHR возвращается с сообщением об ошибке:

HTTP Error 404.3-не найден

Однако, когда я изменяю расширение " вспышки" файл из .json to .txt или .js , как указано здесь: https://serverfault.com/questions/39989/iis-cant-serve-certain-file-extension , затем запрос XHR выполняется успешно.

elydelacruz · Accepted Answer · 2013-02-07 18:07:44

Ну d.name и d.status - это оба массива и должны быть просто строками, если вы хотите показать их содержимое, или yo должен получить доступ к значению индекса 0 этих массивов; т. е., d.name [0] + ':' + d.status[0];

Ken Penn · Accepted Answer · 2013-02-14 01:18:28

Это может быть ваш JSON. Я проделал то же самое упражнение, и оно отлично сработало. Вот мой js(я приложил к div, а не телу). Я запускаю локальный веб-сервер.
d3.json("data/mta001.json", drawli);

function drawli(data) {
    "use strict";
    d3.select('#mta001')
      .append('ul')
      .selectAll('ul')
      .data(data)
      .enter()
      .append('li')
        .text(function (d) {
            return d.name + ': ' + d.status;
      });
    d3.selectAll('#mta001 li')
      .style('color', function (d) {
        if ( d.status == 'GOOD SERVICE') {
            return 'green';
        } else {
            return 'fuchsia';
        }
      });
}
А вот мой JSON:
[
        {
          "name": "123",
          "status": "DELAYS",
          "text": "delay text",
          "Date": "12/08/2012",
          "Time": " 1:03PM"
        }
]