javascript - 通过 Javascript Infovis Toolkit 修复 Spacetree 中的节点宽度和高度

Question

我终于几乎完美地完成了我的节点，不幸的是我还有一个问题

Canvas 上绘制的宽度不是定义节点的宽度。蓝色+紫色是节点 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

        }

我错过了什么？

Answer 1

不是一个确切的答案，但这可能是一个填充问题吗？

根据我自己的经验，我知道

Node: {
height: 80,
width: 140
}

需要...

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

居中对齐。

我想知道您是否缺少默认填充？