我终于让我的节点几乎完美地完成了，不幸的是我还有一个问题
在画布上绘制的宽度不是定义节点的宽度。蓝色 + 紫色是节点 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
}
我错过了什么？