diff --git a/example/tree/tree.html b/example/tree/tree.html index 8e4466f..cdc1c5d 100644 --- a/example/tree/tree.html +++ b/example/tree/tree.html @@ -1,51 +1,48 @@ - - tree - - - - - - - - - - + + - - -
- - - + +
+ + diff --git a/lib/charts/tree.js b/lib/charts/tree.js index 55b40dc..10f926b 100644 --- a/lib/charts/tree.js +++ b/lib/charts/tree.js @@ -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 ( '
' + nodesData[i].name + '
' - ); + floatTag.html('
' + nodesData[i].name + '
'); 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();