diff --git a/doc/chord文档.md b/doc/chord文档.md new file mode 100644 index 0000000..f5927b6 --- /dev/null +++ b/doc/chord文档.md @@ -0,0 +1,38 @@ +弦图(Chord)简介 +======================== +弦图通常用来展示多个节点间的连结关系。它使用环内的弦链接外圈的元素，以表示外圈元素之间的关联性。 +## 绘制弦图 +绘制弦图的javascript代码如下： + +```javascript +//创建Chord对象，包含于id为”chart”的dom结点，宽、高分别为700、500px。 +var chord = new DataV.Chord("chart", {“width”: 700, “height”: 500}); +//设置数据，输入的数据为一个二维数组。 +chord.setSource(source); //source is a 2-d array +//绘制 +chord.render(); +``` + +设置 Chord选项时，可以设置如下属性： + +- `width`：画布宽度，默认500px +- `height`：画布高度，默认500px +- `legend`： 是否有图例。默认true。 + +##数据说明 + +``` +[ + [北京,上海,广州], + [0,11880,5147], + [19757,0,19250], + [5278,11157,0,0] +] +``` + +如上数据表示了三个节点北京,上海,广州之间两两关系的对应值。第一行对应弦外圈N个元素名称。第二行开始的N行中，每个数据所在的i行，j列的值，表示第i个元素到第j个元素对于的弦的值。 + +以上设置了绘制Chord所需的最重要的属性，调用render()就能完成绘制。 +交互包括：对弦与外围圆环的鼠标悬浮。对图例的点击。 + + diff --git a/doc/force文档.md b/doc/force文档.md index 0e8240f..5994d11 100644 --- a/doc/force文档.md +++ b/doc/force文档.md @@ -19,7 +19,7 @@ net.render(); - `width`：画布宽度，默认500px - `height`：画布高度，默认500px -- `tag`： 是否有图例。默认true。 +- `legend`： 是否有图例。默认true。 - `forceValue`： 代表引力大小，默认为10. - `linkLength`： 代表边长度，默认50， 而一些边的长度在运动过程中会受到点之间作用力的影响而改变。 - `classNum`： 对节点进行分组的数目。分组的依据是其节点值的大小，初始值为6。 diff --git a/example/chord/chord.csv b/example/chord/chord.csv deleted file mode 100644 index e158b27..0000000 --- a/example/chord/chord.csv +++ /dev/null @@ -1,23 +0,0 @@ -City1,City2,City3,City4,City5,City6,City7,City8,City9,City10,City11,City12,City8,City9,City10,City11,City12,City8,City9,City10,City11,City12 -0,0,12060,0,0,0,12060,0,8010,16145,8090,0,0,8010,16145,8090,0,0,8010,16145,8090,0 -0,0,0,0,0,2990,0,0,0,0,11975,9790,0,0,0,11975,9790,0,0,0,11975,9790 -10103,0,0,0,0,0,0,2868,6171,0,8916,0,2868,6171,0,8916,0,2868,6171,0,8916,0 -0,0,0,0,0,10048,0,0,0,8916,0,1951,0,0,8916,0,1951,0,0,8916,0,1951 -0,0,0,0,0,0,0,6171,0,6171,0,10048,6171,0,6171,0,10048,6171,0,6171,0,10048 -0,16145,0,8045,0,0,0,16907,0,0,8045,0,16907,0,0,8045,0,16907,0,0,8045,0 -1013,0,0,0,0,0,0,12868,0,18090,0,0,12868,0,18090,0,0,12868,0,18090,0,0 -0,0,2060,0,1951,10048,2060,0,0,0,8090,8045,0,0,0,8090,8045,0,0,0,8090,8045 -18010,0,3600,0,0,0,0,0,0,0,11975,0,0,0,0,11975,0,0,0,0,11975,0 -1013,0,0,6907,11975,0,8916,0,0,0,0,3809,0,0,0,0,3809,0,0,0,0,3809 -11975,5871,8916,0,0,10048,0,16171,5871,0,0,0,16171,5871,0,0,0,16171,5871,0,0,0 -0,10048,0,8171,1951,0,0,6171,0,16145,0,0,6171,0,16145,0,0,6171,0,16145,0,0 -0,0,2060,0,1951,10048,2060,0,0,0,8090,8045,0,0,0,8090,8045,0,0,0,8090,8045 -18010,0,3600,0,0,0,0,0,0,0,11975,0,0,0,0,11975,0,0,0,0,11975,0 -1013,0,0,6907,11975,0,8916,0,0,0,0,3809,0,0,0,0,3809,0,0,0,0,3809 -11975,5871,8916,0,0,10048,0,16171,5871,0,0,0,16171,5871,0,0,0,16171,5871,0,0,0 -0,10048,0,8171,1951,0,0,6171,0,16145,0,0,6171,0,16145,0,0,6171,0,16145,0,0 -0,0,2060,0,1951,10048,2060,0,0,0,8090,8045,0,0,0,8090,8045,0,0,0,8090,8045 -18010,0,3600,0,0,0,0,0,0,0,11975,0,0,0,0,11975,0,0,0,0,11975,0 -1013,0,0,6907,11975,0,8916,0,0,0,0,3809,0,0,0,0,3809,0,0,0,0,3809 -11975,5871,8916,0,0,10048,0,16171,5871,0,0,0,16171,5871,0,0,0,16171,5871,0,0,0 -0,10048,0,8171,1951,0,0,6171,0,16145,0,0,6171,0,16145,0,0,6171,0,16145,0,0 diff --git a/example/chord/chord.html b/example/chord/chord.html index e65fa76..922a0c5 100644 --- a/example/chord/chord.html +++ b/example/chord/chord.html @@ -49,7 +49,7 @@ var chord = new Chord("chart",{ width: 800 }); - DataV.csv("chord.csv", function (source) { + DataV.csv("flight.csv", function (source) { chord.setSource(source); chord.render(); }); diff --git a/example/chord/chord_flight.html b/example/chord/chord_flight.html deleted file mode 100644 index 5d7865c..0000000 --- a/example/chord/chord_flight.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - Chord Diagram - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file diff --git a/lib/charts/chord.js b/lib/charts/chord.js index 864b7b4..a187bcf 100644 --- a/lib/charts/chord.js +++ b/lib/charts/chord.js @@ -27,16 +27,16 @@ this.groupNames = []; //数组：记录每个group的名字 //图的大小设置 - this.defaults.tag = true; + this.defaults.legend = true; this.defaults.width = 800; this.defaults.height = 800; //设置用户指定的属性 this.setOptions(options); - this.tagArea = [20, (this.defaults.height - 20 - 220), 200, 220]; - if (this.defaults.tag) { - this.xOffset = this.tagArea[2]; + this.legendArea = [20, (this.defaults.height - 20 - 220), 200, 220]; + if (this.defaults.legend) { + this.xOffset = this.legendArea[2]; } else { this.xOffset = 0; } @@ -77,35 +77,35 @@ */ Chord.prototype.render = function () { this.layout(); - if (this.defaults.tag) { - this.tag(); + if (this.defaults.legend) { + this.legend(); } }; /** * 绘制图例 */ - Chord.prototype.tag = function () { + Chord.prototype.legend = function () { var that = this; var paper = this.canvas; - var tagArea = this.tagArea; + var legendArea = this.legendArea; var rectBn = paper.set(); this.underBn = []; var underBn = this.underBn; for (i = 0; i <= this.groupNum; i++) { //底框 - underBn.push(paper.rect(tagArea[0] + 10, tagArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ + underBn.push(paper.rect(legendArea[0] + 10, legendArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ "fill": "#ebebeb", "stroke": "none" //"r": 3 }).hide()); //色框 - paper.rect(tagArea[0] + 10 + 3, tagArea[1] + 10 + (20 + 3) * i + 6, 16, 8).attr({ + paper.rect(legendArea[0] + 10 + 3, legendArea[1] + 10 + (20 + 3) * i + 6, 16, 8).attr({ "fill": this.getColor(i), "stroke": "none" }); //文字 - paper.text(tagArea[0] + 10 + 3 + 16 + 8, tagArea[1] + 10 + (20 + 3) * i + 10, this.groupNames[i]).attr({ + paper.text(legendArea[0] + 10 + 3 + 16 + 8, legendArea[1] + 10 + (20 + 3) * i + 10, this.groupNames[i]).attr({ "fill": "black", "fill-opacity": 1, "font-family": "Verdana", @@ -114,7 +114,7 @@ "text-anchor": "start" }); //选框 - rectBn.push(paper.rect(tagArea[0] + 10, tagArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ + rectBn.push(paper.rect(legendArea[0] + 10, legendArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ "fill": "white", "fill-opacity": 0, "stroke": "none" diff --git a/lib/charts/force.js b/lib/charts/force.js index aeb81f1..c46732f 100644 --- a/lib/charts/force.js +++ b/lib/charts/force.js @@ -29,13 +29,13 @@ this.nodeValueMax = 1; this.clicked = false; this.clickedNum = -1; - this.tagClicked = false; + this.legendClicked = false; // Properties this.font = {}; // Canvas - this.defaults.tag = true; + this.defaults.legend = true; this.defaults.width = 500; this.defaults.height = 500; this.defaults.linkLength = 50; @@ -47,9 +47,9 @@ this.setOptions(options); this.defaults.charge = -(this.defaults.width + this.defaults.height) / this.defaults.forceValue; - this.tagArea = [20, (this.defaults.height - 20 - this.defaults.classNum * 20), 200, 220]; - if (this.defaults.tag) { - this.xOffset = this.tagArea[2]; + this.legendArea = [20, (this.defaults.height - 20 - this.defaults.classNum * 20), 200, 220]; + if (this.defaults.legend) { + this.xOffset = this.legendArea[2]; } else { this.xOffset = 0; } @@ -203,7 +203,7 @@ conf.iterate = (nodesNum + linksNum) * 2; var onMouseClick = function () { - that.tagClicked = false; + that.legendClicked = false; that.underBn.forEach(function (d) { d.hide(); d.data('clicked', false); @@ -269,7 +269,7 @@ }; var onCanvasClick = function () { - that.tagClicked = false; + that.legendClicked = false; that.underBn.forEach(function (d) { d.hide(); d.data('clicked', false); @@ -463,30 +463,30 @@ /** * 绘制图例 */ - Force.prototype.tag = function () { + Force.prototype.legend = function () { var that = this; var conf = this.defaults; var paper = this.canvas; - var tagArea = this.tagArea; + var legendArea = this.legendArea; var rectBn = paper.set(); this.underBn = []; var underBn = this.underBn; for (i = 0; i <= conf.classNum - 1; i++) { //底框 - underBn.push(paper.rect(tagArea[0] + 10, tagArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ + underBn.push(paper.rect(legendArea[0] + 10, legendArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ "fill": "#ebebeb", "stroke": "none", 'opacity': 1 }).data('clicked', false).hide()); //色框 - paper.rect(tagArea[0] + 10 + 3, tagArea[1] + 10 + (20 + 3) * i + 6, 16, 8).attr({ + paper.rect(legendArea[0] + 10 + 3, legendArea[1] + 10 + (20 + 3) * i + 6, 16, 8).attr({ "fill": that.getColor(i), "stroke": "none" }); //文字 var min = Math.floor(this.nodeValueMin + i * (this.nodeValueMax - this.nodeValueMin) / conf.classNum); var max = Math.floor(min + (this.nodeValueMax - this.nodeValueMin) / conf.classNum); - paper.text(tagArea[0] + 10 + 3 + 16 + 8, tagArea[1] + 10 + (20 + 3) * i + 10, min + " ~ " + max).attr({ + paper.text(legendArea[0] + 10 + 3 + 16 + 8, legendArea[1] + 10 + (20 + 3) * i + 10, min + " ~ " + max).attr({ "fill": "black", "fill-opacity": 1, "font-family": "Verdana", @@ -495,7 +495,7 @@ "text-anchor": "start" }); //选框 - rectBn.push(paper.rect(tagArea[0] + 10, tagArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ + rectBn.push(paper.rect(legendArea[0] + 10, legendArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ "fill": "white", "fill-opacity": 0, "stroke": "none" @@ -531,7 +531,7 @@ } }); if (d.data("clicked") === 0) { - that.tagClicked = true; + that.legendClicked = true; underBn[i].attr('opacity', 1); underBn[i].data('clicked', true); underBn[i].show(); @@ -557,7 +557,7 @@ }); d.data("clicked", 1); } else if (d.data("clicked") === 1) { - that.tagClicked = false; + that.legendClicked = false; underBn[i].data('clicked', false); underBn[i].hide(); d.data("clicked", 0); @@ -701,8 +701,8 @@ this.setOptions(options); this.canvas.clear(); this.layout(); - if (this.defaults.tag) { - this.tag(); + if (this.defaults.legend) { + this.legend(); } this.update(); this.animate(); diff --git a/lib/charts/pie.js b/lib/charts/pie.js index d37e46e..52b05b8 100644 --- a/lib/charts/pie.js +++ b/lib/charts/pie.js @@ -31,16 +31,16 @@ this.click = 0; //图的大小设置 - this.defaults.tag = true; + this.defaults.legend = true; this.defaults.width = 800; this.defaults.height = 800; //设置用户指定的属性 this.setOptions(options); - this.tagArea = [20, (this.defaults.height - 20 - 220), 200, 220]; - if (this.defaults.tag) { - this.xOffset = this.tagArea[2]; + this.legendArea = [20, (this.defaults.height - 20 - 220), 200, 220]; + if (this.defaults.legend) { + this.xOffset = this.legendArea[2]; } else { this.xOffset = 0; } @@ -207,37 +207,37 @@ } - if (conf.tag) { - this.tag(); + if (conf.legend) { + this.legend(); } }; /** * 绘制图例 */ - Pie.prototype.tag = function () { + Pie.prototype.legend = function () { var that = this; var conf = this.defaults; var paper = this.canvas; - var tagArea = this.tagArea; + var legendArea = this.legendArea; this.rectBn = paper.set(); var rectBn = this.rectBn; this.underBn = []; var underBn = this.underBn; for (var i = 0, l = this.groups.length; i < l; i++) { //底框 - underBn.push(paper.rect(tagArea[0] + 10, tagArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ + underBn.push(paper.rect(legendArea[0] + 10, legendArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ "fill": "#ebebeb", "stroke": "none" //"r": 3 }).hide()); //色框 - paper.rect(tagArea[0] + 10 + 3, tagArea[1] + 10 + (20 + 3) * i + 6, 16, 8).attr({ + paper.rect(legendArea[0] + 10 + 3, legendArea[1] + 10 + (20 + 3) * i + 6, 16, 8).attr({ "fill": this.getColor(i), "stroke": "none" }); //文字 - paper.text(tagArea[0] + 10 + 3 + 16 + 8, tagArea[1] + 10 + (20 + 3) * i + 10, this.groupNames[i]).attr({ + paper.text(legendArea[0] + 10 + 3 + 16 + 8, legendArea[1] + 10 + (20 + 3) * i + 10, this.groupNames[i]).attr({ "fill": "black", "fill-opacity": 1, "font-family": "Verdana", @@ -246,7 +246,7 @@ "text-anchor": "start" }); //选框 - rectBn.push(paper.rect(tagArea[0] + 10, tagArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ + rectBn.push(paper.rect(legendArea[0] + 10, legendArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ "fill": "white", "fill-opacity": 0, "stroke": "none" diff --git a/lib/charts/scatterplotMatrix.js b/lib/charts/scatterplotMatrix.js index 004e303..4dac527 100644 --- a/lib/charts/scatterplotMatrix.js +++ b/lib/charts/scatterplotMatrix.js @@ -34,14 +34,14 @@ this.defaults.circleR = 3; //图例区域的左上顶点坐标x，y，宽，高 - this.defaults.tagArea = [20, (this.defaults.height - 20 - 220), 200, 220]; + this.defaults.legendArea = [20, (this.defaults.height - 20 - 220), 200, 220]; //简介区域的左上角顶点坐标x，y，宽，高 this.defaults.introArea = [20, 20, 200, 200]; //散点矩阵区域的左上顶点坐标x，y，宽，高 this.defaults.diagramArea = [240, 20, (this.defaults.width - 260), (this.defaults.height - 40)]; this.defaults.typeName = "NoTypeDefinition"; //默认情况是没有分类 - this.defaults.tagDimen = "NoTagDimen"; + this.defaults.legendDimen = "NoTagDimen"; this.setOptions(options); @@ -136,7 +136,7 @@ ScatterplotMatrix.prototype.setAxis = function () { var conf = this.defaults; - conf.tagArea = [20, (conf.height - 20 - 220), 200, 220]; + conf.legendArea = [20, (conf.height - 20 - 220), 200, 220]; conf.introArea = [20, 20, 200, 200]; conf.diagramArea = [240, 20, (conf.width - 260), (conf.height - 40)]; @@ -367,9 +367,9 @@ "fill": this.getColor(circleType) }); //如果制定了hover要显示的文字，则hover显示的文字 - if (conf.tagDimen !== "NoTagDimen") { - hoverTag = conf.tagDimen + ": " + sourceData[k][conf.tagDimen]; - circle.data("tag", hoverTag); + if (conf.legendDimen !== "NoTagDimen") { + hoverTag = conf.legendDimen + ": " + sourceData[k][conf.legendDimen]; + circle.data("legend", hoverTag); } circlesFg.push(circle); } @@ -377,22 +377,22 @@ } //图例 - var tagArea = this.defaults.tagArea; + var legendArea = this.defaults.legendArea; var rectBn = paper.set(); var underBn = []; for (i = 0; i <= typeMax; i++) { //底框 - underBn.push(paper.rect(tagArea[0] + 10, tagArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ + underBn.push(paper.rect(legendArea[0] + 10, legendArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ "fill": "#ebebeb", "stroke": "none" }).hide()); //色框 - paper.rect(tagArea[0] + 10 + 3, tagArea[1] + 10 + (20 + 3) * i + 6, 16, 8).attr({ + paper.rect(legendArea[0] + 10 + 3, legendArea[1] + 10 + (20 + 3) * i + 6, 16, 8).attr({ "fill": this.getColor(i), "stroke": "none" }); //文字 - paper.text(tagArea[0] + 10 + 3 + 16 + 8, tagArea[1] + 10 + (20 + 3) * i + 10, conf.typeNames[i]).attr({ + paper.text(legendArea[0] + 10 + 3 + 16 + 8, legendArea[1] + 10 + (20 + 3) * i + 10, conf.typeNames[i]).attr({ "fill": "black", "fill-opacity": 1, "font-family": "Verdana", @@ -401,7 +401,7 @@ "text-anchor": "start" }); //选框 - rectBn.push(paper.rect(tagArea[0] + 10, tagArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ + rectBn.push(paper.rect(legendArea[0] + 10, legendArea[1] + 10 + (20 + 3) * i, 180, 20).attr({ "fill": "white", "fill-opacity": 0, "stroke": "none" @@ -411,13 +411,13 @@ if (browserName !== "Microsoft Internet Explorer") { rectBn.forEach(function (d, i) { - underBn[i].data('tagclicked', false); + underBn[i].data('legendclicked', false); d.mouseover(function () { - if (underBn[i].data('tagclicked') === false) { + if (underBn[i].data('legendclicked') === false) { underBn[i].attr('opacity', 0.5).show(); } }).mouseout(function () { - if (underBn[i].data('tagclicked') === false) { + if (underBn[i].data('legendclicked') === false) { underBn[i].hide(); } }); @@ -437,7 +437,7 @@ }); if (d.data("clicked") === 0) { underBn[i].attr('opacity', 1).show(); - underBn[i].data('tagclicked', true); + underBn[i].data('legendclicked', true); circlesFg.forEach(function (ec) { if (ec.data("type") !== d.data("type")) { ec.hide(); @@ -450,7 +450,7 @@ d.data("clicked", 1); } else if (d.data("clicked") === 1) { underBn[i].hide(); - underBn[i].data('tagclicked', false); + underBn[i].data('legendclicked', false); d.data("clicked", 0); circlesFg.forEach(function (ec) { ec.show(); @@ -543,7 +543,7 @@ if (that.preIndex !== "start") { that.lineV.hide(); that.lineH.hide(); - if (conf.tagDimen !== "NoTagDimen") { + if (conf.legendDimen !== "NoTagDimen") { floatTag.css({"visibility" : "hidden"}); } } @@ -555,8 +555,8 @@ that.lineV.translate(center[0] - that.linePosition[0], 0).attr('stroke', that.getColor(circlesFg[i].data('colorType'))).show(); that.lineH.translate(0, center[1] - that.linePosition[1]).attr('stroke', that.getColor(circlesFg[i].data('colorType'))).show(); that.linePosition = center; - if (conf.tagDimen !== "NoTagDimen") { - floatTag.html('
' + circlesFg[i].data("tag") + '
'); + if (conf.legendDimen !== "NoTagDimen") { + floatTag.html('
' + circlesFg[i].data("legend") + '
'); floatTag.css({"visibility" : "visible"}); } that.preIndex = i;