mirror of
https://github.com/TBEDP/datavjs.git
synced 2025-12-08 19:45:52 +00:00
Jackson Tian
commit
9b6e8f4acc
38
doc/chord文档.md
Normal file
38
doc/chord文档.md
Normal file
@ -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()就能完成绘制。
|
||||
交互包括：对弦与外围圆环的鼠标悬浮。对图例的点击。
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ net.render();
|
||||
|
||||
- `width`：画布宽度，默认500px
|
||||
- `height`：画布高度，默认500px
|
||||
- `tag`： 是否有图例。默认true。
|
||||
- `legend`： 是否有图例。默认true。
|
||||
- `forceValue`： 代表引力大小，默认为10.
|
||||
- `linkLength`： 代表边长度，默认50， 而一些边的长度在运动过程中会受到点之间作用力的影响而改变。
|
||||
- `classNum`： 对节点进行分组的数目。分组的依据是其节点值的大小，初始值为6。
|
||||
|
||||
@ -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
|
||||
|
@ -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();
|
||||
});
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>Chord Diagram</title>
|
||||
<script type="text/javascript" src="../../deps/compatible.js">
|
||||
|
||||
</script>
|
||||
<script type="text/javascript" src="../../deps/d3.js"></script>
|
||||
<script type="text/javascript" src="../../deps/d3.csv.js"></script>
|
||||
<script type="text/javascript" src="../../deps/d3.layout.js"></script>
|
||||
<script type="text/javascript" src="../../deps/raphael.js"></script>
|
||||
<script type="text/javascript" src="../../deps/underscore-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
|
||||
type="text/javascript"></script>
|
||||
<!-- chord -->
|
||||
<script type="text/javascript" src="../../deps/seajs/sea.js"></script>
|
||||
<script type="text/javascript">
|
||||
seajs.config({
|
||||
alias: {
|
||||
'DataV': '/lib/datav.js',
|
||||
'Chord': '/lib/charts/chord.js'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<STYLE type="text/css">
|
||||
#chart {
|
||||
border-top: 1px dashed #F00;
|
||||
border-bottom: 1px dashed #F00;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.textArea {
|
||||
border: 2px solid black;
|
||||
color: black;
|
||||
font-family: monospace;
|
||||
height: 3in;
|
||||
overflow: auto;
|
||||
padding: 0.5em;
|
||||
width: 750px;
|
||||
}
|
||||
</STYLE>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chart"></div>
|
||||
<script type="text/javascript">
|
||||
seajs.use(["Chord", "DataV"], function (Chord, DataV) {
|
||||
// DataV.changeTheme("datav");
|
||||
var chord = new Chord("chart", {
|
||||
width: 1000,
|
||||
tag: true
|
||||
});
|
||||
DataV.csv("flight.csv", function (source) {
|
||||
chord.setSource(source);
|
||||
chord.render();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -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"
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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('<div style="text-align: center;margin:auto;color:#ffffff">' + circlesFg[i].data("tag") + '</div>');
|
||||
if (conf.legendDimen !== "NoTagDimen") {
|
||||
floatTag.html('<div style="text-align: center;margin:auto;color:#ffffff">' + circlesFg[i].data("legend") + '</div>');
|
||||
floatTag.css({"visibility" : "visible"});
|
||||
}
|
||||
that.preIndex = i;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user