組織図には JavaScript Visualization Toolkit (The JIT) を推奨する人がたくさんいるのを見ました。私は組織図に JavaScript InfoVis Toolkit の SpaceTree を使用しようとしています。私の組織図のノードは、従業員のプロフィール写真、クリックするとオーバーレイで表示される 2 つの異なるアイコン、名前、タイトル、レポート数を含む 3 行の簡単なテキストを含むコンポーネントのようなものです。各行は細い水平線で区切られています。次のようになります。
私の質問は、スペースツリー ノードをその程度までカスタマイズできるかどうかです。ノードを、独自のレンダリング メソッドを持つ別の「コンポーネント」または JavaScript オブジェクトのように使用できますか?
フォーラムで調査したところ、検討したオプションは次のとおりです。
- $jit.ST.NodeTypes.implement() ... しかし、私が見た例に基づくと、これは形状などに関してノードをカスタマイズするのに役立っているようですが、上記で描いたレイアウトのようなものではありません。私が言及しているカスタマイズは次のようなものです:http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
- example5.js の onCreateLabel メソッドで innerHtml を設定しようとしましたが、何も行われないようです。ただし、これがノードのカスタマイズに適した方法かどうかはわかりません。Example5 は JIT Web サイトにあります (複数のハイパーリンクを投稿することはできません)
- Graph.Node を拡張しています...私はまだこのオプションを検討中ですが、現時点では、スペース ツリーで Graph.myNode を使用するのがどれほど複雑で、Graph.myNode がどのようになるかわかりません。これらの点についてさらに検討し、実現可能かどうかを確認する必要があります。
ベストアンサー1
Spacetree は、非常にカスタマイズ可能です。ノードには、画像や必要なものを表示できます。ノードには、カスタム クリック イベントを設定できます。カスタム イベントを設定するには、onclick イベントでツリー全体を再描画する必要があります。
ここに例があります。クリックイベントの成功関数について。ここでは、クリックイベントを「clickable」クラスで呼び出しています。
$.ajaxSetup({ cache: false });
$(".clickable").live("click", function () {
$.ajax({
url: url + "?id=" + parentId + "&ts=" + new Date().getMilliseconds(),
type: "POST",
cache: false,
dataType: "html",
success: function (html) {
init(html);
}
});
});
name プロパティを使用すると、次のように画像を指定できます。
{id:"90", name:"<a href='javascript:;' class='clickable' name='90'><img src='images/picture.gif' width='30' height='30' alt='pic' /></a>", data:{}, children:[]}
役に立つ場合は回答としてマークしてください。ありがとうございます。