Примеры иерархического дерева JS со смешанным подходом Canvas / DIV - PullRequest
Новая
       9

Примеры иерархического дерева JS со смешанным подходом Canvas / DIV

3 голосов
/ 29 февраля 2012

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

Примеры Spacetree из инструментария JavaScript InfoVis предоставляют практически все функциональные возможности с основным предупреждением о том, что весь график отображается на холсте. Поэтому типы узлов визуально ограничены элементами рисования на холсте.

Вместо этого я ищу библиотеку, которая позволяет отображать <div> s (каждое с несколькими полями, значками, функциями Javascript и т. Д.) И визуально связываться аналогично примерам Spacetree. По сути, общая концепция аналогична UML или диаграммам баз данных.

Полагаю, я мог бы просто использовать инструментарий InfoVis, наложить мои <div> s и ограничить интерактивность, но мне интересно, сталкивался ли кто-нибудь с библиотекой, которая делает это из коробки (и желательно бесплатно).

1 Ответ

2 голосов
/ 29 февраля 2012

Это уже делает именно это! Глядя на пример на сайте InvoVis, есть фрагмент javascript, который фактически строит HTML-узлы для узлов, показанных на экране. Похоже, все, что вам нужно сделать, это изменить этот раздел, чтобы получить ваш HTML-блок: 

//This method is called on DOM label creation.  
//Use this method to add event handlers and styles to  
//your node.  
onCreateLabel: function(label, node){  
    label.id = node.id;              
    label.innerHTML = node.name;  
    label.onclick = function(){  
        st.onClick(node.id);  
    };  
    //set label styles  
    var style = label.style;  
    style.width = 40 + 'px';  
    style.height = 17 + 'px';              
    style.cursor = 'pointer';  
    style.color = '#fff';  
    //style.backgroundColor = '#1a1a1a';  
    style.fontSize = '0.8em';  
    style.textAlign= 'center';  
    style.textDecoration = 'underline';  
    style.paddingTop = '3px';  
},

Важная строка 

label.innerHTML = node.name;
...