Фикс узел и высота в Spacetree от Javascript Infovis Toolkit

Question

Я, наконец, получил мои узлы почти сделано отлично, к сожалению, у меня еще одна проблема

ширина, что рисуется на canvas - это не ширина определенного узла. Синий + фиолетовый - это узел div + padding, и я мог бы идеально сосредоточить его, используя это, если бы не тот факт, что то, что нарисовано, не заботится о ширине, которую я имею для этого. Вот мой код для моего spacetree:

 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';} 

для выравнивания по центру.

Интересно, есть ли у вас пробел по умолчанию?