Skip to content

Instantly share code, notes, and snippets.

@ufologist

ufologist/spacetree-mindmap-demo.html

Created September 17, 2013 07:21
Show Gist options
  • Save ufologist/6591008 to your computer and use it in GitHub Desktop.
Save ufologist/6591008 to your computer and use it in GitHub Desktop.
Download ZIP
参考SpaceTree的示例, 实现类似脑图(mindmap)效果
Raw
spacetree-mindmap-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Spacetree - Mindmap Demo</title>
<link rel="stylesheet" href="spacetree.css" />
<style>
#infovis {
height: 600px;
margin-left: auto;
margin-right: auto;
background-color: #111;
}
#infovis .node {
cursor: pointer;
color: #333;
font-size: 0.8em;
padding: 3px;
}
</style>
<!-- 依靠excanvas来解决IE不支持canvas的问题 -->
<!--[if IE]>
<script src="http://philogb.github.io/jit/static/v20/Jit/Extras/excanvas.js"></script>
<![endif]-->
</head>
<body>
<h1>Spacetree - Mindmap Demo</h1>
<div id="infovis"></div>
<!-- JIT Library File -->
<script src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
<script src="spacetree-mindmap-demo.js"></script>
</body>
</html>
Raw
spacetree-mindmap-demo.js
/**
* Simplest Templating Engine
*
* https://github.com/trix/nano
*/
function nano(template, data) {
return template.replace(/\{([\w\.]*)\}/g, function(str, key) {
var keys = key.split("."), v = data[keys.shift()];
for (var i = 0, l = keys.length; i < l; i++) v = v[keys[i]];
return (typeof v !== "undefined" && v !== null) ? v : "";
});
}
// 渲染节点内容的模版
var tpl = '<span>{name}({unit}): {value}</span><br /><span>环比: {ratio}%</span>';
// 测试数据
var nodes = {
id: 'node01',
name: tpl,
data: { // 节点的扩展数据, 可依据这些值来渲染节点的样式
name: '收入',
unit: '元',
value: 26000,
ratio: -4.7
},
children: [{
id: 'node11',
name: tpl,
data: {
name: '收入1',
unit: '元',
value: 5000,
ratio: -5.1
},
children: [{
id: 'node111',
name: tpl,
data: {
name: '收入11',
unit: '元',
value: 2000,
ratio: -5.3
}
}, {
id: 'node112',
name: tpl,
data: {
name: '收入12',
unit: '元',
value: 1000,
ratio: 2.2
}
}, {
id: 'node113',
name: tpl,
data: {
name: '收入13',
unit: '元',
value: 2000,
ratio: -3.5
}
}]
}, {
id: 'node12',
name: tpl,
data: {
name: '收入2',
unit: '元',
value: 8000,
ratio: 2.5
}
}, {
id: 'node13',
name: tpl,
data: {
name: '收入3',
unit: '元',
value: 6000,
ratio: 2.3
}
}, {
id: 'node14',
name: tpl,
data: {
name: '收入4',
unit: '元',
value: 7000,
ratio: -2.3
},
children: [{
id: 'node141',
name: tpl,
data: {
name: '收入41',
unit: '元',
value: 4000,
ratio: -1.3
}
}, {
id: 'node142',
name: tpl,
data: {
name: '收入42',
unit: '元',
value: 1000,
ratio: 2.1
}
}, {
id: 'node143',
name: tpl,
data: {
name: '收入43',
unit: '元',
value: 2000,
ratio: -3.9
}
}]
}]
};
/**
* 参考SpaceTree的示例, 实现类似脑图(mindmap)效果
* http://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html
*/
(function() {
// Create a new Spacetree instance
// http://philogb.github.io/jit/static/v20/Docs/files/Visualizations/Spacetree-js.html
var st = new $jit.ST({
// id of viz container element
injectInto: 'infovis',
// set duration for the animation
duration: 800,
// set animation transition type
transition: $jit.Trans.Quart.easeInOut,
// Whether to show the entire tree when loaded
// or just the number of levels specified by levelsToShow.
// Default’s true.
// 关系到是否可以展开多个节点
// http://stackoverflow.com/questions/4223415/how-do-i-prevent-the-javascript-infovis-spacetree-st-select-method-from-coll
constrained: false,
// The number of levels to show for a subtree, Default’s 2
levelsToShow: 1,
// set distance between node and its children
levelDistance: 50,
// enable panning
Navigation: {
enable:true,
panning:true
},
// 节点和连接线都是通过canvas画出来的
Node: {
type: 'rectangle',
align: 'left',
autoWidth: true,
autoHeight: true,
overridable: true // for styling individual nodes or edges
},
Edge: {
type: 'bezier',
overridable: true
},
Tips: {
enable: true,
type: 'HTML',
offsetX: 10,
offsetY: 10,
onShow: function(tip, node) {
tip.innerHTML = nano(node.name, node.data);
}
},
// 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.innerHTML = nano(node.name, node.data);
label.onclick = function() {
st.onClick(node.id);
};
// SpaceTree expand/collapse behaviour
// https://groups.google.com/forum/#!topic/javascript-information-visualization-toolkit/pHblraFbFuI
// 实现点击节点可以展开/收起, 效果还不是很理想
// label.onclick = function() {
// console.log(node._collapsed, node.collapsed);
// if (node._collapsed === undefined || node._collapsed === true) {
// st.op.expand(node, {
// type: 'animate',
// duration: 1000,
// hideLabels: false,
// transition: $jit.Trans.Quart.easeOut
// });
// st.onClick(node.id);
// node._collapsed = false;
// node.collapsed = false;
// } else {
// st.op.contract(node, {
// type: 'animate',
// duration: 1000,
// hideLabels: false,
// transition: $jit.Trans.Quart.easeOut
// });
// node._collapsed = true;
// node.collapsed = true;
// }
// };
},
// 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 = '#ff7';
} else { // 这里可以实现根据节点的扩展数据来渲染节点样式
delete node.data.$color;
// if the node belongs to the last plotted level
// if(!node.anySubnode('exist')) {
//count children number
// var count = 0;
// node.eachSubnode(function(n) { count++; });
//assign a node color based on
//how many children it has
// node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];
// }
}
},
// 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;
}
},
onBeforeCompute: function(node) {
// console.log('loading', node.name);
},
onAfterCompute: function(){
// console.log('done');
}
});
// load data
st.loadJSON(nodes);
// 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);
// 测试调整tree方位(Tree Orientation)
// setTimeout(function() {
// st.switchPosition('top', 'animate');
// setTimeout(function() {
// st.switchPosition('right', 'animate');
// setTimeout(function() {
// st.switchPosition('bottom', 'animate');
// }, 6000);
// }, 5500);
// }, 5000);
})();
Raw
spacetree.css
.jit-autoadjust-label {
padding: 5px;
}
.tip {
color: #111;
background-color: white;
border:1px solid #ccc;
-moz-box-shadow:#555 2px 2px 8px;
-webkit-box-shadow:#555 2px 2px 8px;
-o-box-shadow:#555 2px 2px 8px;
box-shadow:#555 2px 2px 8px;
opacity:0.9;
filter:alpha(opacity=90);
font-size:10px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
padding:7px;
}
@ufologist
Copy link
Author

预览效果
spacetree mindmap demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment