37

多くの人が組織図にJavaScriptVisualizationToolkit（JIT）を推奨しているのを見ました。組織図にJavaScriptInfoVisToolkitのSpaceTreeを使用しようとしています。私の組織図のノードは、それ自体が従業員のプロフィール写真、クリック時にオーバーレイを表示する2つの異なるアイコン、および名前、タイトル、レポート数を含む3行の単純なテキストを持つコンポーネントのようなものです...各行は区切られています明るい水平線で。何かのようなもの：

私の質問は、スペースツリーノードをそのような範囲でカスタマイズすることは可能ですか？独自のレンダリングメソッドを持つ別の「コンポーネント」またはJavaScriptオブジェクトのようにNodeを使用できますか？

私はフォーラムについて調査し、検討したいくつかのオプションは次のとおりです。

  1. $ jit.ST.NodeTypes.implement（）...しかし、私が見た例に基づくと、これは形状などの観点からノードをカスタマイズするのに役立つようですが、上に描いたレイアウトとは異なります。私は次のようなカスタマイズについて言及しています： http：//groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef？ lnk = gst＆q = spacetree + nodetype＃ebf472366cdbbdef
  2. example5.jsのonCreateLabelメソッドでinnerHtmlを設定しようとしましたが、何も実行されていないようです。ただし、それがノードのカスタマイズに適しているかどうかはわかりません。例5はJITWebサイトにあります（複数のハイパーリンクを投稿することは許可されていません）
  3. Graph.Nodeの拡張...私はまだこのオプションを検討していますが、現時点では、スペースツリーでGraph.myNodeを使用することがどれほど複雑で、Graph.myNodeはどのようになるのかわかりません。私はそれらの線についてもっと考え、それが実現可能かどうかを確かめる必要があります。
4

5 に答える 5

5

Spacetree は非常にカスタマイズできます。ノードは、画像や必要なものを表示できます。ノードのカスタム クリック イベントを設定できます。カスタム イベントを作成するには、onclick イベントでツリー全体を再描画する必要があります。

ここに例があります。クリックイベントの成功関数について。ここでは、クラス「クリック可能」のクリック イベントを呼び出しました。

      $.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:[]}

役立つ場合は、回答としてマークします。ありがとう。

于 2012-01-09T09:28:14.593 に答える
1

yourNode を Graph.node のプロトタイプの先祖にし、必要なスロットを設定してから、適切なレンダリング/強制コードのカスタマイズを追加できます。

于 2012-01-08T18:25:05.657 に答える
0

私はスペースツリーを使用しており、ラベルタイプをHTML（デフォルト）に設定するだけで、通常のHTMLとCSSを使用してラベルのスタイルを設定できます。画像、リンク、テキストなどがあります。

ノードではなく、ラベルを使用していることに注意してください。ノードはグラフコンポーネントです。ラベルは、ノードを表す視覚的なものです。

「onCreateLabel」の関数でスペースツリーパスを初期化する場合：

var myOnCreateLabel = function(label, node) {
  label.onclick = function(event) {/* setup onclick handler */};
  label.innerHTML = "<img src='myImage.png' />"; // use image in label
};
var myST = new $jit.ST({/*other settings*/ onCreateLabel: myOnCreateLabel});
于 2012-02-10T23:19:05.523 に答える
0

HTML5/Canvas のみで作業してもかまわない場合は、http://orgplot.codeplex.comも試してみてください。シンプルなインターフェイスは画像ノードもサポートしています。

于 2012-02-11T08:16:05.540 に答える
0 
 this.st=new $jit.ST(

{

            onCreateLabel: function (label, node)
            {
                var labelContent = $('<table cellpadding="0" cellspacing="0" class="nodeContainer"><tr><td>' +
                    '<div class="buttonContainer">' +
                    '</div></td></tr><tr><td>' +
                    '<table  class="nodeBox" cellpadding="0" cellspacing="0">' +
                    '<tr>' +
                    '<td class="iconTd"></td>' +
                    '<td class="center nodeName">' + node.name + '</td>' +
                    '</tr></table>' +
                    '</td></tr></table>');
                thisObject.onCreateLabel.raise(thisObject, { labelContent: labelContent, node: node });
                if (node.data && node.data.Icon && node.data.Icon != "")
                {
                    labelContent.find(".iconTd").append($("<img src='" + node.data.Icon + "' alt=''>"));
                }
                else
                {
                    labelContent.find(".iconTd").remove();
                }

                var lblCtl = $(label).append(labelContent);

                if (node.data.Data.ChildrenCount)
                {
                    labelContent.append("<tr><td class='subnode'></td></tr>");
                }
                if (node.name.length > 40)
                {
                    lblCtl.attr("title", node.name);
                    node.name = node.name.substr(0, 37);
                    node.name = node.name + "...";
                }                        
                lblCtl.click(function (sender)
                {
                    //thisObject.isNodeClicked = true;
                    var target = $(sender.target);
                    if (!target.hasClass("subnode"))
                    {
                        if (thisObject.currentSelectedNode)
                        {
                            thisObject.currentSelectedNode.buttonContainer.hide();
                        }
                        var btnContainer = labelContent.find(".buttonContainer");
                        thisObject.currentSelectedNode = { nodeElement: lblCtl, node: node, buttonContainer: btnContainer, event: sender };
                        btnContainer.append(thisObject.$globalButtonContainer.show()).show();
                        var button = target.closest(".chartActionButton");
                        if (button.length > 0)
                        {
                            thisObject.onNodeAction.raise(thisObject, { name: button.attr("name"), nodeElement: lblCtl, node: node, button: target });
                        }
                        else
                        {
                            thisObject.onNodeClick.raise(thisObject, thisObject.currentSelectedNode);
                        }
                    }
                    else
                    {
                        thisObject.st.onClick(node.id);
                    }
                });
                label.id = node.id;
                //set label styles
                thisObject.setNodeStyle(node.data.Style, label.style);
            }

});

于 2013-07-14T05:56:49.767 に答える