Элемент управления JavaScript для детализации дерева статистики

У меня есть дерево данных JSON со статистической информацией:

{
  prefix: "a",
  count: 20,
  children: [
    {
      prefix: "a:b",
      count: 15,
      children: [
        { prefix: "a:b:c", count: 5 },
        {
          prefix: "a:b:d",
          count: 10
          children: [
            { prefix: "a:b:d:e", count = 7 },
            { prefix: "a:b:d:f", count = 3 }
          ]
        }
      ]
    },
    { prefix: "a:c", count: 5 }
  ]
}

Общее количество листьев огромно (но я думаю, что я предварительно обрежу их на сервере, так что это не должно быть проблемой).

Я могу изменить формат вывода по мере необходимости.

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

Я думаю, что здесь должен работать элемент управления treemap, но я открыт для других предложений.

Посоветуйте, какую бесплатную библиотеку JavaScript я могу использовать повторно. Предпочтительно что-то бесплатное, надежное и простое в использовании (но не бесплатное, если оно отличное).

Библиотеки, поддерживающие jQuery, предпочтительнее, но допустимы и любые другие, если они достаточно хороши.


person Alexander Gladysh    schedule 01.04.2011    source источник


Ответы (5)


Я нахожу JavaScript InfoVis Toolkit очень интересным (не использовал его), но кажется многообещающим [open source]

person manji    schedule 06.04.2011
comment
TreeMap от InfoVis удобен, легко настраивается и работает с данными почти точно в том формате, который вы предоставляете. Одним из ограничений является то, что для рендеринга требуется полное дерево данных. Нет встроенных средств для динамической загрузки данных при детализации. - person Brent Worden; 11.04.2011

ProtoVis от Stanford Visualization group — еще один вариант для вас. См. раздел «Иерархии» на странице примера.

person William Niu    schedule 06.04.2011
comment
Поддерживает ли он детализацию данных? (То есть, когда вы нажимаете на узел карты дерева, и представление масштабируется до поддерева этого узла.) - person Alexander Gladysh; 06.04.2011
comment
Нет, это не так. Но он достаточно гибкий, чтобы вы могли легко привязать обработчик события, скажем, к click или mouseover. См. vis.stanford.edu/protovis/docs/interaction.html. И вы можете использовать эффект пользовательского интерфейса jQuery (например, перенос) для анимации: jqueryui.com/demos/effect. - person William Niu; 06.04.2011
comment
ProtoVis не очень хорошо работает в IE. Он содержит много ошибок JavaScript для большинства своих визуализаций. - person Brent Worden; 11.04.2011

Если возвращаемая иерархия не слишком глубокая, будет ли работать обычное дерево? http://www.jstree.com/

person Brett Zamir    schedule 09.04.2011
comment
Нет, простите, обычные деревья в данном случае просто недостаточно наглядны. Мне нужно что-то более продвинутое, например карта дерева. - person Alexander Gladysh; 10.04.2011

Я использовал древовидную карту в JavaScript InfoVis Toolkit, чтобы сделать то же самое.

Но вместо того, чтобы использовать встроенную функцию детализации вниз и вверх в древовидной карте из JIT, я обнаружил, что проще обслуживать один уровень данных в древовидной карте за раз, а затем при необходимости перерисовывать его с новыми данными.

Используя этот метод, JIT работает быстро и легко настраивается.

person Eivind    schedule 11.04.2011

задавался ранее в Отображать иерархию JSON/YAML в виде дерева в HTML?

см. ответ, отображающий дерево в "divs". можно добавить небольшой javascript к именам свойств json, чтобы показать/скрыть следующий div.

извините, у меня нет готового кода, может быть, я сделаю, если хорошо попросите :)

person alfred    schedule 02.04.2011
comment
Древовидное представление здесь не сработает — недостаточно наглядно. Я хотел бы найти элемент управления древовидной картой или что-то еще, что более эффективно визуализировало бы веса каждого узла. - person Alexander Gladysh; 03.04.2011