D3.js использовать hardcode json для реализации treemap не так (просто COPY демо-код, и он не сработал)

Question

Я новичок, чтобы узнать D3.js, и я пытаюсь использовать его treemap, и я копирую демо-код и меняю ссылка внешнего json-файла на hardcode, и когда я его запускаю, он столкнулся с проблемой. Вот оригинальная демонстрация и учебник: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap_code.php и ссылка на демонстрационную версию находится внизу этой страницы.

И вот мой код: http://jsfiddle.net/cR35x/2/

Чтобы загрузить жёстко JSON, я изменил эту функцию, пожалуйста, обратите внимание здесь:

var json = [......]; 
    d3.json(json, function(root) { 
    root = json; 
    initialize(root); 
    accumulate(root); 
    layout(root); 
    display(root); 
    ....... 

Он не показывал правильную вещь как демо , Может ли кто-нибудь помочь мне? Благодаря!

Другой вопрос, когда я запустить его локально, без какой-либо сервер с хромом, так же, как URL:

файла: /// C: /Users/Administrator/Downloads/treemap/treemap.html

В нем нет ничего, кроме серого квадрата, без каких-либо слов или ссылок на нем. И для chrome я уже установил тег: allow-file-access-from-files.

Спасибо!

Answer 1

Это потому, что мой друг, пример, который вы опубликовали, использует d3.v2, тогда как в вашей скрипке вы используете d3.v3.

Here's the updated fiddle с рабочим примером с использованием d3.v2.

В случае, если вы заинтересованы: Выполнение функции layout отличается в v2 и v3. И так как вы использовали v3, элементы-элементы json-объектов не обрабатывались, а отображались только дети верхнего уровня.

Кроме того, поскольку данные были жестко закодированы в файле, это также должно работать, когда вы напрямую открываете его в chrome через протокол file://.

Answer 2

Цель d3.json(filename, function) - прочитать файл и сделать что-то с данными. Первый параметр должен быть именем файла. Если вы уже загрузили данные как объект Javascript, вам не нужно использовать d3.json. Просто сделайте что-нибудь с данными.