1

ようやくノードがほぼ完璧に完成しましたが、残念ながらもう 1 つ問題があります。

ここに画像の説明を入力

キャンバスに描画されるものの幅は、定義されたノードの幅ではありません。青 + 紫はノード div + パディングであり、描画されるものが幅を気にしないという事実がなければ、それを使用して完全に中央に配置できます。私のスペースツリーのコードは次のとおりです。

        function jitSpaceTree(data,index,rootid){
            var json = eval("(" + data + ")");
            console.log(json);
            //end
            //init Spacetree
            //Create a new ST instance
            var st = new $jit.ST({
                //id of viz container element
                injectInto: 'hier'+index,
                //set duration for the animation
                duration: 800,
                //set animation transition type
                transition: $jit.Trans.Quart.easeInOut,
                //set distance between node and its children
                levelDistance: 25,
                orientation: 'top',
                //enable panning
                Navigation: {
                enable:true,
                panning:true
                },
                //set node and edge styles
                //set overridable=true for styling individual
                //nodes or edges
                Node: {
                    autoHeight: true,
                    autoWidth: true,
                    type: 'rectangle',
                    color: '#aaa',
                    overridable: true
                },

                Edge: {
                    type: 'bezier',
                    overridable: true
                },

                //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);
                        st.select(node.id);
                        st.removeSubtree(label.id, false, "replot", {
                            hideLabels: false
                        });
                        jQuery.getJSON('Mobile_Subordinate.cfm?Empid='+node.id, function(data2) { 
                            var subtree = '';
                            for(var i=0; i<data2.DATA.length-1; i++){
                                subtree = subtree + '{"id": "' + data2.DATA[i][4].replace(/\s/g, '') + '","name": "' + data2.DATA[i][0].replace(/\s/g, '') + '<br>' + data2.DATA[i][1].replace(/\s/g, '') + '","data": {},"children": []},';
                            }
                            subtree = subtree + '{"id": "' + data2.DATA[data2.DATA.length-1][4].replace(/\s/g, '') + '","name": "' + data2.DATA[data2.DATA.length-1][0].replace(/\s/g, '') + '<br>' + data2.DATA[data2.DATA.length-1][1].replace(/\s/g, '') + '","data": {},"children": []}';
                            subtree = '{"id": "'+label.id+'", "children": ['+ subtree +']}'
                            childData = jQuery.parseJSON(subtree);
                            console.log(childData);
                            st.addSubtree(childData, 'replot',{
                                hideLabels: false
                            }); 
                        });
                    };

                    //set label styles
                    var style = label.style;
                    style.width = node.data.offsetWidth;
                    style.height = node.data.offsetHeight;            
                    style.cursor = 'pointer';
                    style.color = '#fff';
                    style.fontSize = '0.8em';
                    style.textAlign= 'center';
                },

                //This method is called right before plotting
                //a node. It's useful for changing an individual node
                //style properties before plotting it.
                //The data properties prefixed with a dollar
                //sign will override the global node style properties.
                onBeforePlotNode: function(node){
                    //add some color to the nodes in the path between the
                    //root node and the selected node.
                    if (node.selected) {
                        node.data.$color = "#ab8433";
                    }
                    else {
                        delete node.data.$color;
                        node.data.$color = "#ccc";
                    }
                },

                //This method is called right before plotting
                //an edge. It's useful for changing an individual edge
                //style properties before plotting it.
                //Edge data proprties prefixed with a dollar sign will
                //override the Edge global style properties.
                onBeforePlotLine: function(adj){
                    if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                        adj.data.$color = "#eed";
                        adj.data.$lineWidth = 3;
                    }
                    else {
                        delete adj.data.$color;
                        delete adj.data.$lineWidth;
                    }
                }
            });
            //load json data
            st.loadJSON(json);
            //compute node positions and layout
            st.compute();
            //optional: make a translation of the tree
            st.geom.translate(new $jit.Complex(-200, 0), "current");
            //emulate a click on the root node.
            //st.onClick(st.root);
            st.onClick(rootid);
            //end

        }

私は何が欠けていますか?

4

1 に答える 1

0

正確な答えではありませんが、これはパディングの問題でしょうか?

私は自分自身の経験からそれを知っています

Node: {
height: 80,
width: 140
}

ニーズ...

{style.width = 136 + 'px';
style.height = 75 + 'px';            
style.paddingTop = '5px';
style.paddingLeft = '2px';
style.paddingRight = '2px';}

中央揃えにします。

あなたが見逃しているデフォルトのパディングがあるのだろうか?

于 2013-10-02T13:43:39.220 に答える