複合キャンバス/ DIVアプローチを使用したJS階層ツリーの例

Question

ウェブサイト上に複数のフィールドを含むデータグループの視覚化を提供したいと考えています。グループは、主に階層的な方法で他のグループに関連しています。

JavaScript InfoVisツールキットのSpacetree examplesは、ほぼすべての機能を提供し、グラフ全体がキャンバスにレンダリングされるという大きな注意点があります。したがって、ノードタイプはキャンバスの描画要素に視覚的に制限されます。

代わりに、私は<div>をレンダリングすることができ（複数のフィールド、アイコン、JavaScriptの機能などを持つ）、Spacetreeの例と同様に視覚的にリンクできるライブラリを探しています。基本的には、一般的な概念はUMLまたはデータベース図と似ています。

InfoVisツールキットを使用して<div>をオーバーレイしてインタラクティブ機能を制限しているとしますが、誰でもこのボックスの外で（できれば無料で）実行するライブラリを見つけたのかなと思います。

Answer 1

これはすでに実現しています。 InvoVisサイトの例を見ると、実際には画面に表示されているノードのhtmlノードを構築しているjavascriptがあります。あなたがする必要があるのは、それはそう、あなたの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;