mirror of
https://github.com/TBEDP/datavjs.git
synced 2026-02-01 16:06:25 +00:00
Update doc
This commit is contained in:
Jackson Tian
parent
d63bb4220e
commit
14f4537bda
@ -1,51 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tree</title>
|
||||
<script type="text/javascript" src="../../deps/d3.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/d3.csv.js"></script>
|
||||
<script type="text/javascript" src="../../deps/d3.layout.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/raphael.min.js"></script>
|
||||
<script src="../../deps/eventproxy.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../deps/seajs/sea.js"></script>
|
||||
|
||||
<STYLE type="text/css">
|
||||
<head>
|
||||
<title>tree</title>
|
||||
<script type="text/javascript" src="../../deps/d3.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/d3.csv.js"></script>
|
||||
<script type="text/javascript" src="../../deps/d3.layout.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/raphael.min.js"></script>
|
||||
<script src="../../deps/eventproxy.js"></script>
|
||||
<script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/underscore-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../deps/seajs/sea.js"></script>
|
||||
<style type="text/css">
|
||||
#chart {
|
||||
border-top: 1px dashed #F00;
|
||||
border-bottom: 1px dashed #F00;
|
||||
border-top: 1px dashed #F00;
|
||||
border-bottom: 1px dashed #F00;
|
||||
}
|
||||
.textArea {
|
||||
border: 2px solid black;
|
||||
color: black;
|
||||
font-family: monospace;
|
||||
height: 3in;
|
||||
overflow: auto;
|
||||
padding: 0.5em;
|
||||
width: 750px;
|
||||
border: 2px solid black;
|
||||
color: black;
|
||||
font-family: monospace;
|
||||
height: 3in;
|
||||
overflow: auto;
|
||||
padding: 0.5em;
|
||||
width: 750px;
|
||||
}
|
||||
</STYLE>
|
||||
</head>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
seajs.config({
|
||||
alias: {
|
||||
'jquery': '/deps/jquery-1.7.1.js',
|
||||
'datav': '/datav.js',
|
||||
'tree': '/libs/tree.js'
|
||||
}
|
||||
});
|
||||
seajs.use(["tree", "datav"], function (Tree, DataV) {
|
||||
var tree = new Tree("chart", {width:960});
|
||||
DataV.csv("DataExample.csv", function(source){
|
||||
tree.setSource(source);
|
||||
tree.render();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<body>
|
||||
<div id="chart"></div>
|
||||
<script type="text/javascript">
|
||||
seajs.config({
|
||||
alias: {
|
||||
'DataV': '/lib/datav.js',
|
||||
'Tree': '/lib/charts/tree.js'
|
||||
}
|
||||
});
|
||||
seajs.use(["Tree", "DataV"], function (Tree, DataV) {
|
||||
var tree = new Tree("chart", {width:960});
|
||||
DataV.csv("DataExample.csv", function(source){
|
||||
tree.setSource(source);
|
||||
tree.render();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,9 +10,9 @@
|
||||
var theme = DataV.Themes;
|
||||
|
||||
var Tree = DataV.extend(DataV.Chart, {
|
||||
initialize: function (container, options) {
|
||||
initialize: function (node, options) {
|
||||
this.type = "Tree";
|
||||
this.container = container;
|
||||
this.node = this.checkContainer(node);
|
||||
this.defaults = {};
|
||||
|
||||
this.addlink = {};
|
||||
@ -37,17 +37,6 @@
|
||||
this.emitter.on(eventName, callback);
|
||||
};
|
||||
|
||||
Tree.prototype.setOptions = function (options) {
|
||||
var prop;
|
||||
if (options) {
|
||||
for (prop in options) {
|
||||
if (options.hasOwnProperty(prop)) {
|
||||
this.defaults[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Tree.prototype.hierarchyTableToJson = function (table) {
|
||||
if (table[0][0] === "ID") {
|
||||
table = table.slice(1);
|
||||
@ -119,12 +108,14 @@
|
||||
if (isNaN(parseFloat(record.size))) {
|
||||
throw new Error("Leaf node's size is not a number(ID:" + (rootID + 1) + ").");
|
||||
} else {
|
||||
return {name: record.name,
|
||||
size: record.size,
|
||||
num: record.id,
|
||||
children: null,
|
||||
draw: false,
|
||||
value: record.value};
|
||||
return {
|
||||
name: record.name,
|
||||
size: record.size,
|
||||
num: record.id,
|
||||
children: null,
|
||||
draw: false,
|
||||
value: record.value
|
||||
};
|
||||
}
|
||||
} else {
|
||||
var childNode = [];
|
||||
@ -190,9 +181,6 @@
|
||||
};
|
||||
|
||||
Tree.prototype.getColor = function () {
|
||||
//var conf = this.defaults;
|
||||
//var treedepth = this.treeDepth;
|
||||
|
||||
var colorMatrix = DataV.getColor();
|
||||
var color;
|
||||
if (colorMatrix.length > 1 && colorMatrix[0].length > 1) {
|
||||
@ -200,44 +188,15 @@
|
||||
} else {
|
||||
color = colorMatrix[0];
|
||||
}
|
||||
//var colorRow_Num = colorRow.length - 1;
|
||||
|
||||
return DataV.gradientColor(color, "special");
|
||||
|
||||
// return function(d){
|
||||
// var color;
|
||||
|
||||
// if ((treedepth * 2 - 1 )> colorRow_Num) {
|
||||
// if (d > colorRow_Num) {
|
||||
// color = colorRow[colorRow_Num];
|
||||
// } else {
|
||||
// color = colorRow[d];
|
||||
// }
|
||||
// } else {
|
||||
// if (d == 0) {
|
||||
// color = colorRow[0];
|
||||
// } else {
|
||||
// color = colorRow[d * 2 - 1];
|
||||
// }
|
||||
// }
|
||||
|
||||
// return color;
|
||||
// }
|
||||
};
|
||||
|
||||
// Tree.prototype.getFont = function () {
|
||||
// //var conf = this.defaults;
|
||||
|
||||
// return DataV.getFont();
|
||||
// };
|
||||
|
||||
Tree.prototype.createCanvas = function () {
|
||||
var conf = this.defaults;
|
||||
this.canvas = new Raphael(this.container, conf.width, conf.height);
|
||||
this.canvasF = document.getElementById(this.container);
|
||||
canvasStyle = this.canvasF.style;
|
||||
canvasStyle.position = "relative";
|
||||
this.floatTag = DataV.FloatTag()(this.canvasF);
|
||||
this.canvas = new Raphael(this.node, conf.width, conf.height);
|
||||
this.node.style.position = "relative";
|
||||
this.floatTag = DataV.FloatTag()(this.node);
|
||||
|
||||
this.floatTag.css({"visibility": "hidden"});
|
||||
|
||||
@ -250,7 +209,7 @@
|
||||
that.emitter.trigger("dblclick", event);
|
||||
});
|
||||
|
||||
var mousewheel = document.all ? "mousewheel" : "DOMMouseScroll";
|
||||
var mousewheel = document.all ? "mousewheel" : "DOMMouseScroll";
|
||||
this.DOMNode.bind(mousewheel, function (event) {
|
||||
that.emitter.trigger("mousewheel", event);
|
||||
});
|
||||
@ -274,14 +233,8 @@
|
||||
};
|
||||
|
||||
Tree.prototype.zoom = function (d) {
|
||||
var multiple = 2;
|
||||
|
||||
if (d !== null) {
|
||||
multiple = d;
|
||||
}
|
||||
|
||||
var multiple = d || 2;
|
||||
var conf = this.defaults;
|
||||
|
||||
conf.width = conf.width * multiple;
|
||||
|
||||
if (conf.height <= this.treeDepth * conf.deep) {
|
||||
@ -305,10 +258,10 @@
|
||||
var c2x = tx;
|
||||
var c2y = ty - (ty - fy) / 2;
|
||||
|
||||
var link_path = [["M", fx, fy + conf.radius],
|
||||
var link_path = [["M", fx, fy + conf.radius],
|
||||
["C", c1x, c1y, c2x, c2y, tx, ty - conf.radius]];
|
||||
|
||||
return link_path;
|
||||
return link_path;
|
||||
};
|
||||
|
||||
Tree.prototype.generatePaths = function () {
|
||||
@ -339,7 +292,7 @@
|
||||
tree.update(this.data("num"));
|
||||
};
|
||||
|
||||
$("#" + this.container).append(this.floatTag);
|
||||
$(this.node).append(this.floatTag);
|
||||
|
||||
var i, nodesLength;
|
||||
for (i = 0, nodesLength = nodesData.length; i < nodesLength; i++) {
|
||||
@ -356,7 +309,7 @@
|
||||
.attr({ stroke: "#939598", "stroke-width": 0.5});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var startX;
|
||||
@ -375,10 +328,10 @@
|
||||
|
||||
nodes.push(
|
||||
canvas.circle(startX, startY, radius)
|
||||
.attr({fill: color(d.depth / treedepth),
|
||||
stroke: "#ffffff",
|
||||
"stroke-width": 1,
|
||||
"fill-opacity": 0.4,
|
||||
.attr({fill: color(d.depth / treedepth),
|
||||
stroke: "#ffffff",
|
||||
"stroke-width": 1,
|
||||
"fill-opacity": 0.4,
|
||||
"data": 12})
|
||||
.data("num", i)
|
||||
.animate({cx: d.x, cy: d.y}, 500, "backOut")
|
||||
@ -389,11 +342,13 @@
|
||||
}
|
||||
|
||||
if (d._children) {
|
||||
nodes[i].attr({stroke: color(d.depth / treedepth),
|
||||
"stroke-width": radius,
|
||||
"stroke-opacity": 0.4,
|
||||
"fill-opacity": 1,
|
||||
"r": radius / 2});
|
||||
nodes[i].attr({
|
||||
stroke: color(d.depth / treedepth),
|
||||
"stroke-width": radius,
|
||||
"stroke-opacity": 0.4,
|
||||
"fill-opacity": 1,
|
||||
"r": radius / 2
|
||||
});
|
||||
}
|
||||
|
||||
if (d.children) {
|
||||
@ -431,7 +386,7 @@
|
||||
this.animate({r: thisradius + 2, "fill-opacity": 0.75}, 100);
|
||||
} else {
|
||||
this.animate({r: thisradius + 2, "stroke-opacity": 0.75}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
textpath[i].attr({'font-size': 20});
|
||||
|
||||
@ -452,7 +407,7 @@
|
||||
}
|
||||
getFline(parent, num);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
getFline(nodesData[i], 0.9);
|
||||
|
||||
@ -466,11 +421,7 @@
|
||||
}
|
||||
|
||||
console.log(nodesData[i]);
|
||||
floatTag.html ( '<div style = "text-align: center;margin:auto;color:'
|
||||
//+ jqNode.color
|
||||
+ "#ffffff"
|
||||
+ '">' + nodesData[i].name + '</div>'
|
||||
);
|
||||
floatTag.html('<div style = "text-align: center;margin:auto;color:#ffffff">' + nodesData[i].name + '</div>');
|
||||
floatTag.css({"visibility" : "visible"});
|
||||
})
|
||||
.mouseout(function () {
|
||||
@ -479,7 +430,7 @@
|
||||
this.animate({r: thisradius, "fill-opacity": 0.4}, 100);
|
||||
} else {
|
||||
this.animate({r: thisradius, "stroke-width": thisstrokewidth, "stroke-opacity": 0.4}, 100);
|
||||
}
|
||||
}
|
||||
textpath[i].attr({'font-size': 12});
|
||||
textpath[i].animate({'y': textY}, 100, "backOut");
|
||||
|
||||
@ -489,7 +440,7 @@
|
||||
path[node.id - 1].attr({"stroke-width": 0.5, "stroke-opacity": 1});
|
||||
getFline(parent);
|
||||
}
|
||||
}
|
||||
};
|
||||
getFline(nodesData[i]);
|
||||
|
||||
var thisparent = nodesData[i].parent;
|
||||
@ -527,17 +478,14 @@
|
||||
addlink[node.num].path[j].attr({path: link_path});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
this.nodes = nodes;
|
||||
this.path = path;
|
||||
this.textpath = textpath;
|
||||
// this.link_paths = link_paths;
|
||||
// this.circle_paths = circle_paths;
|
||||
// this.text_paths = text_paths;
|
||||
};
|
||||
|
||||
Tree.prototype.update = function (i) {
|
||||
@ -580,18 +528,14 @@
|
||||
this.render();
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 渲染Tree
|
||||
*/
|
||||
Tree.prototype.render = function (options) {
|
||||
// var st = new Date().getTime();
|
||||
if (!this.container) {
|
||||
throw new Error("Please specify which node to render.");
|
||||
}
|
||||
this.canvas.clear();
|
||||
this.setOptions(options);
|
||||
this.layout();
|
||||
// var st2 = new Date().getTime();
|
||||
|
||||
this.generatePaths();
|
||||
// var et = new Date().getTime();
|
||||
//this.canvas.renderfix();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user