mirror of
https://github.com/TBEDP/datavjs.git
synced 2026-02-01 16:06:25 +00:00
Jackson Tian
commit
91ebf1710b
@ -1,59 +0,0 @@
|
||||
力引导布局网络图(Force)简介
|
||||
力引导布局网络图表现了不同数据元素之间的二元关系。 绘制Force-directed网络图的javascript代码如下：
|
||||
//创建Force对象，包含于id为”chart”的dom结点，宽、高分别为700、500px。
|
||||
var net = new DataV.Force("chart"，{“width”: 700, “height”: 500});
|
||||
//设置net选项，边的目标长度为100。
|
||||
net.setOptions({“linkLength”: 100}); //options
|
||||
//设置数据，输入的数据为一个二维数组。
|
||||
net.setSource(source); //source is a 2-d array
|
||||
//绘制
|
||||
net.render();
|
||||
创建Force对象时，第一个参数是包含Force的dom结点 或该结点的id， 第二个参数是各种选项，其中最重要的宽和高。
|
||||
设置 Force选项时，可以设置如下属性：
|
||||
width:画布宽度，默认500px
|
||||
height：画布高度，默认500px
|
||||
tag：是否有图例。默认true。
|
||||
forceValue：代表引力大小，默认为10.
|
||||
linkLength：代表边长度，默认50， 而一些边的长度在运动过程中会受到点之间作用力的影响而改变。
|
||||
classNum：对节点进行分组的数目。分组的依据是其节点值的大小，初始值为6。
|
||||
Iterate：在IE下不会显示开始载入的动态效果。Iterate代表经过多少个周期显示IE中的布局结果，初始值为100。
|
||||
本组件的数据输入采用二维表格式。数据前半部分输入节点信息，后半部分输入边的信息。按照如下格式：
|
||||
[
|
||||
[Id,Name,Value],
|
||||
[0,Li,0],
|
||||
[1,Wang,1],
|
||||
[2,Zhang,0],
|
||||
[Source,Target,Value],
|
||||
[0,1,1],
|
||||
[1,2,8],
|
||||
[2,0,3]
|
||||
]
|
||||
如上数据表示了三个节点Li,Wang,Zhang的信息，以及节点之间三条边的信息。每一行对应与一个节点或一条边。节点部分在前半部，Id代表节点编号，Name代表节点的相关信息；Group代表节点分组（可缺省，默认为1）。边部分在后半部，Source与Target代表边的两个节点，无向图中次序不限；Value代表边的值（可缺省，默认为1）。
|
||||
以上设置了绘制Force所需的最重要的属性，调用render()就能完成绘制。
|
||||
交互包括：对节点的鼠标悬浮，点击与拖拽。对图例的点击。
|
||||
|
||||
|
||||
弦图简介
|
||||
弦图通常用来展示多个节点间的连结关系。 绘制Hierarchical Edge Bundling的javascript代码如下：
|
||||
//创建Bundle对象，包含于id为”chart”的dom结点，直径为600px。
|
||||
var bundle = new DataV.Bundle("chart", {});
|
||||
//设置数据，输入的数据为一个二维数组。
|
||||
bundle.setSource(source); //source is a 2-d array
|
||||
//绘制
|
||||
bundle.render();
|
||||
创建Bundle对象时，第一个参数是包含Bundle的dom结点 或该结点的id。
|
||||
设置Chord属性时：
|
||||
width:画布宽度，默认500px
|
||||
height：画布高度，默认500px
|
||||
tag：是否有图例。默认true。
|
||||
Bundle数据输入的格式为二维表。例如下面的数组共有有一个父节点bundle，他拥有五个子节点a、b、c、d、e，他们的大小分别为4、3、6、2、4，其中他们相互之间又引用关系。比如，a节点引用了d节点；b节点引用了a、e节点等。整张图正是以这个引用关系来绘制的。如果两个节点之间又引用关系，那么在图上绘制一条曲线来表达这种关系。
|
||||
[
|
||||
[name,size,imports],
|
||||
[bundle.a,4,[ bundle.d]],
|
||||
[bundle.b,3,[ bundle.a, bundle.e]],
|
||||
[bundle.c,6,[ bundle.b, bundle.e]],
|
||||
[bundle.d,2,[ bundle.a]],
|
||||
[bundle.e,4,[ bundle.d]]
|
||||
]
|
||||
以上设置了绘制Bundle所需的最重要的属性，调用render()就能完成绘制。
|
||||
交互包括：对弦与弧的鼠标悬浮和对图例的点击。
|
||||
@ -1,3 +1,51 @@
|
||||
<<<<<<< HEAD
|
||||
力引导布局网络图(Force)简介
|
||||
========================
|
||||
力引导布局网络图表现了不同数据元素之间的二元关系。
|
||||
## 绘制Force图
|
||||
绘制Force-directed网络图的javascript代码如下：
|
||||
|
||||
```javascript
|
||||
//创建Force对象，包含于id为”chart”的dom结点，宽、高分别为700、500px。
|
||||
var net = new DataV.Force("chart"，{“width”: 700, “height”: 500});
|
||||
//设置net选项，边的目标长度为100。
|
||||
net.setOptions({“linkLength”: 100}); //options
|
||||
//设置数据，输入的数据为一个二维数组。
|
||||
net.setSource(source); //source is a 2-d array
|
||||
//绘制
|
||||
net.render();
|
||||
```
|
||||
创建Force对象时，第一个参数是包含Force的dom结点 或该结点的id， 第二个参数是各种选项，其中最重要的宽和高。
|
||||
设置 Force选项时，可以设置如下属性：
|
||||
|
||||
- `width`：画布宽度，默认500px
|
||||
- `height`：画布高度，默认500px
|
||||
- `tag`： 是否有图例。默认true。
|
||||
- `forceValue`： 代表引力大小，默认为10.
|
||||
- `linkLength`： 代表边长度，默认50， 而一些边的长度在运动过程中会受到点之间作用力的影响而改变。
|
||||
- `classNum`： 对节点进行分组的数目。分组的依据是其节点值的大小，初始值为6。
|
||||
- `Iterate`： 在IE下不会显示开始载入的动态效果。Iterate代表经过多少个周期显示IE中的布局结果，初始值为100。
|
||||
|
||||
## 数据说明
|
||||
本组件的数据输入采用二维表格式。数据前半部分输入节点信息，后半部分输入边的信息。按照如下格式：
|
||||
|
||||
```
|
||||
[
|
||||
[Id,Name,Value],
|
||||
[0,Li,0],
|
||||
[1,Wang,1],
|
||||
[2,Zhang,0],
|
||||
[Source,Target,Value],
|
||||
[0,1,1],
|
||||
[1,2,8],
|
||||
[2,0,3]
|
||||
]
|
||||
```
|
||||
|
||||
如上数据表示了三个节点Li,Wang,Zhang的信息，以及节点之间三条边的信息。每一行对应与一个节点或一条边。节点部分在前半部，Id代表节点编号，Name代表节点的相关信息；Group代表节点分组（可缺省，默认为1）。边部分在后半部，Source与Target代表边的两个节点，无向图中次序不限；Value代表边的值（可缺省，默认为1）。
|
||||
以上设置了绘制Force所需的最重要的属性，调用render()就能完成绘制。
|
||||
交互包括：对节点的鼠标悬浮，点击与拖拽。对图例的点击。
|
||||
=======
|
||||
#力引导布局网络图(Force)简介
|
||||
|
||||
力引导布局网络图表现了不同数据元素之间的二元关系。 绘制Force-directed网络图的javascript代码如下：
|
||||
@ -37,4 +85,5 @@
|
||||
```
|
||||
如上数据表示了三个节点Li,Wang,Zhang的信息，以及节点之间三条边的信息。每一行对应与一个节点或一条边。节点部分在前半部，Id代表节点编号，Name代表节点的相关信息；Group代表节点分组（可缺省，默认为1）。边部分在后半部，Source与Target代表边的两个节点，无向图中次序不限；Value代表边的值（可缺省，默认为1）。
|
||||
以上设置了绘制Force所需的最重要的属性，调用render()就能完成绘制。
|
||||
交互包括：对节点的鼠标悬浮，点击与拖拽。对图例的点击。
|
||||
交互包括：对节点的鼠标悬浮，点击与拖拽。对图例的点击。
|
||||
>>>>>>> 6c6c65cf03ce6168996c4ee18955ab8614990fe2
|
||||
|
||||
@ -13,22 +13,23 @@
|
||||
<script type="text/javascript" src="../../deps/seajs/sea.js"></script>
|
||||
<script type="text/javascript">
|
||||
seajs.config({
|
||||
alias: {
|
||||
'datav': '/lib/datav.js',
|
||||
'bubble': '/lib/charts/bubble.js'
|
||||
}
|
||||
alias: {
|
||||
'DataV': '/lib/datav.js',
|
||||
'Axis': '/lib/charts/axis.js',
|
||||
'Bubble': '/lib/charts/bubble.js'
|
||||
}
|
||||
});
|
||||
|
||||
seajs.use(["bubble", "datav"], function (Bubble, DataV) {
|
||||
var bubble = new Bubble("chart", {"width": 1200, "height": 800});
|
||||
DataV.csv("nations2.csv", function(dataSource) {
|
||||
bubble.setSource(dataSource);
|
||||
// the dimension order is time, key, xaxis,yaxis,size,color dimension
|
||||
// if you don't input next line, your source dimensions's order should be like above order
|
||||
// bubble.chooseDimensions(["year", "country", "survival", "children", "population", "region"]);
|
||||
bubble.render();
|
||||
});
|
||||
seajs.use(["Bubble", "DataV"], function (Bubble, DataV) {
|
||||
var bubble = new Bubble("chart", {"width": 1200, "height": 800});
|
||||
DataV.csv("nations2.csv", function(dataSource) {
|
||||
bubble.setSource(dataSource);
|
||||
// the dimension order is time, key, xaxis,yaxis,size,color dimension
|
||||
// if you don't input next line, your source dimensions's order should be like above order
|
||||
// bubble.chooseDimensions(["year", "country", "survival", "children", "population", "region"]);
|
||||
bubble.render();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
28
example/bubble/bubble_without_seajs.html
Normal file
28
example/bubble/bubble_without_seajs.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||||
<title>Bubble Graph</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="chart"></div>
|
||||
<script type="text/javascript" src="../../deps/d3.js"></script>
|
||||
<script type="text/javascript" src="../../deps/raphael.min.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="../../lib/datav.js"></script>
|
||||
<script type="text/javascript" src="../../lib/charts/axis.js"></script>
|
||||
<script type="text/javascript" src="../../lib/charts/bubble.js"></script>
|
||||
<script type="text/javascript">
|
||||
var bubble = new Bubble("chart", {"width": 1200, "height": 800});
|
||||
DataV.csv("nations2.csv", function(dataSource) {
|
||||
bubble.setSource(dataSource);
|
||||
// the dimension order is time, key, xaxis,yaxis,size,color dimension
|
||||
// if you don't input next line, your source dimensions's order should be like above order
|
||||
// bubble.chooseDimensions(["year", "country", "survival", "children", "population", "region"]);
|
||||
bubble.render();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,53 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>Hierarchical Edge Bundling</title>
|
||||
<style type="text/css">
|
||||
.node {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
.link {
|
||||
stroke: steelblue;
|
||||
stroke-opacity: .4;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="text/javascript" src="../../deps/d3.js"></script>
|
||||
<script type="text/javascript" src="../../deps/raphael.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/seajs/sea.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
<script type="text/javascript">
|
||||
//http://planetozh.com/blog/2008/04/javascript-basename-and-dirname/
|
||||
var dir = window.location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
|
||||
seajs.config({
|
||||
alias: {
|
||||
'datav': dir + '/../../datav.js',
|
||||
'bundle': dir + '/../../libs/bundle.js'
|
||||
}
|
||||
});
|
||||
seajs.use(["bundle", "datav"], function (Bundle, DataV) {
|
||||
var bundle = new Bundle("chart", {
|
||||
"diameter": 1000
|
||||
});
|
||||
DataV.json("data.json", function (source) {
|
||||
bundle.setSource(source);
|
||||
bundle.render();
|
||||
});
|
||||
/*
|
||||
DataV.csv("bundle.csv", function(source){
|
||||
bundle.setSource(source);
|
||||
bundle.render();
|
||||
});
|
||||
*/
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Hierarchical Edge Bundling</title>
|
||||
<style type="text/css">
|
||||
.node {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
.link {
|
||||
stroke: steelblue;
|
||||
stroke-opacity: .4;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="text/javascript" src="../../deps/d3.js"></script>
|
||||
<script type="text/javascript" src="../../deps/raphael.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/seajs/sea.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
<script type="text/javascript">
|
||||
//http://planetozh.com/blog/2008/04/javascript-basename-and-dirname/
|
||||
var dir = location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
|
||||
seajs.config({
|
||||
alias: {
|
||||
'DataV': dir + '/../../lib/datav.js',
|
||||
'Bundle': dir + '/../../lib/charts/bundle.js'
|
||||
}
|
||||
});
|
||||
seajs.use(["Bundle", "DataV"], function (Bundle, DataV) {
|
||||
var bundle = new Bundle("chart", {
|
||||
"diameter": 1000
|
||||
});
|
||||
DataV.json("data.json", function (source) {
|
||||
bundle.setSource(source);
|
||||
bundle.render();
|
||||
});
|
||||
/*
|
||||
DataV.csv("bundle.csv", function(source){
|
||||
bundle.setSource(source);
|
||||
bundle.render();
|
||||
});
|
||||
*/
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
36
example/bundle/bundle_without_seajs.html
Normal file
36
example/bundle/bundle_without_seajs.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Hierarchical Edge Bundling</title>
|
||||
<style type="text/css">
|
||||
.node {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
.link {
|
||||
stroke: steelblue;
|
||||
stroke-opacity: .4;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="text/javascript" src="../../deps/d3.js"></script>
|
||||
<script type="text/javascript" src="../../deps/raphael.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
|
||||
<script type="text/javascript" src="../../lib/datav.js"></script>
|
||||
<script type="text/javascript" src="../../lib/charts/bundle.js"></script>
|
||||
<div id="chart"></div>
|
||||
<script type="text/javascript">
|
||||
var bundle = new Bundle("chart", {
|
||||
"diameter": 1000
|
||||
});
|
||||
DataV.json("data.json", function (source) {
|
||||
bundle.setSource(source);
|
||||
bundle.render();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Chord Diagram</title>
|
||||
|
||||
<script type="text/javascript" src="../../deps/compatible.js"> </script>
|
||||
@ -9,20 +9,21 @@
|
||||
<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': '/datav.js',
|
||||
'chord': '/libs/chord.js'
|
||||
}
|
||||
alias: {
|
||||
'DataV': '/lib/datav.js',
|
||||
'Chord': '/lib/charts/chord.js'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<STYLE type="text/css">
|
||||
<style type="text/css">
|
||||
#chart {
|
||||
border-top: 1px dashed #F00;
|
||||
border-bottom: 1px dashed #F00;
|
||||
@ -37,25 +38,22 @@
|
||||
padding: 0.5em;
|
||||
width: 750px;
|
||||
}
|
||||
</STYLE>
|
||||
</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: 800
|
||||
});
|
||||
DataV.csv("chord.csv", function (source) {
|
||||
chord.setSource(source);
|
||||
chord.render();
|
||||
});
|
||||
<script type="text/javascript">
|
||||
seajs.use(["Chord", "DataV"], function (Chord, DataV) {
|
||||
// DataV.changeTheme("datav");
|
||||
var chord = new Chord("chart",{
|
||||
width: 800
|
||||
});
|
||||
DataV.csv("chord.csv", function (source) {
|
||||
chord.setSource(source);
|
||||
chord.render();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>Chord Diagram</title>
|
||||
@ -11,6 +10,7 @@
|
||||
<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 -->
|
||||
@ -18,8 +18,8 @@
|
||||
<script type="text/javascript">
|
||||
seajs.config({
|
||||
alias: {
|
||||
'DataV': '/datav.js',
|
||||
'Chord': '/libs/chord.js'
|
||||
'DataV': '/lib/datav.js',
|
||||
'Chord': '/lib/charts/chord.js'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -60,6 +60,8 @@ svg {
|
||||
seajs.config({
|
||||
alias: {
|
||||
'DataV': dir + '/../../lib/datav.js',
|
||||
'Axis': dir + '/../../lib/charts/axis.js',
|
||||
'Brush': dir + '/../../lib/charts/brush.js',
|
||||
'Parallel': dir + '/../../lib/charts/parallel.js'
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Parallel Coordinates</title>
|
||||
<style type="text/css">
|
||||
/*
|
||||
@ -45,6 +45,8 @@ svg {
|
||||
<script type="text/javascript" src="../../deps/raphael.min.js"></script>
|
||||
<script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
|
||||
<script type="text/javascript" src="../../lib/datav.js"></script>
|
||||
<script type="text/javascript" src="../../lib/charts/axis.js"></script>
|
||||
<script type="text/javascript" src="../../lib/charts/brush.js"></script>
|
||||
<script type="text/javascript" src="../../lib/charts/parallel.js"></script>
|
||||
|
||||
<div id="chart"></div>
|
||||
@ -55,32 +57,35 @@ svg {
|
||||
<p>brushend</p>
|
||||
<div id="info_brushend"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
var parallel = new Parallel("chart", {"width": 950, "height": 500});
|
||||
|
||||
DataV.csv("cars.csv", function(dataSource) {
|
||||
var domains;
|
||||
parallel.setSource(dataSource);
|
||||
//parallel.chooseDimensions(["name", "name", "economy (mpg)"]);
|
||||
parallel.chooseDimensions(["economy (mpg)", "cylinders", "displacement (cc)", "power (hp)", "weight (lb)", "0-60 mph (s)", "year"]);
|
||||
parallel.setDimensionType({"cylinders": "ordinal"});
|
||||
domains = parallel.getDimensionDomains();
|
||||
parallel.setDimensionDomain({"cylinders": domains["cylinders"].sort(d3.ascending),
|
||||
"economy (mpg)": domains["economy (mpg)"].reverse()});
|
||||
parallel.setDimensionExtent({"cylinders": ["6", "3"], "economy (mpg)": [35, 20] });
|
||||
DataV.csv("cars.csv", function (dataSource) {
|
||||
parallel.setSource(dataSource);
|
||||
//parallel.chooseDimensions(["name", "name", "economy (mpg)"]);
|
||||
parallel.chooseDimensions([
|
||||
"economy (mpg)", "cylinders", "displacement (cc)",
|
||||
"power (hp)", "weight (lb)", "0-60 mph (s)", "year"
|
||||
]);
|
||||
parallel.setDimensionType({"cylinders": "ordinal"});
|
||||
var domains = parallel.getDimensionDomains();
|
||||
parallel.setDimensionDomain({
|
||||
"cylinders": domains["cylinders"].sort(d3.ascending),
|
||||
"economy (mpg)": domains["economy (mpg)"].reverse()
|
||||
});
|
||||
parallel.setDimensionExtent({
|
||||
"cylinders": ["6", "3"],
|
||||
"economy (mpg)": [35, 20]
|
||||
});
|
||||
|
||||
parallel.on("brushstart", function() {
|
||||
$("#info_brushstart").html(JSON.stringify(this.statistic));
|
||||
});
|
||||
parallel.on("brush", function() {
|
||||
$("#info_brush").html(JSON.stringify(this.statistic));
|
||||
});
|
||||
parallel.on("brushend", function() {
|
||||
$("#info_brushend").html(JSON.stringify(this.statistic));
|
||||
});
|
||||
parallel.render();
|
||||
//parallel.setDimensionExtent({"economy (mpg)": [29, 20], "cylinders": ["6", "4"]});//??
|
||||
parallel.on("brushstart", function() {
|
||||
$("#info_brushstart").html(JSON.stringify(this.statistic));
|
||||
});
|
||||
parallel.on("brush", function() {
|
||||
$("#info_brush").html(JSON.stringify(this.statistic));
|
||||
});
|
||||
parallel.on("brushend", function() {
|
||||
$("#info_brushend").html(JSON.stringify(this.statistic));
|
||||
});
|
||||
parallel.render();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
/*global d3*/
|
||||
/*global Raphael*/
|
||||
/*global $*/
|
||||
(function (global) {
|
||||
var DataV = global.DataV;
|
||||
/*global d3,Raphael,$*/
|
||||
;(function (name, definition) {
|
||||
if (typeof define === 'function') { // Module
|
||||
define(definition);
|
||||
} else { // Assign to common namespaces or simply the global object (window)
|
||||
this[name] = definition(function (id) { return this[id];});
|
||||
}
|
||||
})('Brush', function (require) {
|
||||
|
||||
var d3_svg_brush,
|
||||
d3_svg_brushDispatch,
|
||||
@ -616,5 +619,5 @@
|
||||
return d3.rebind(brush, event, "on");
|
||||
};
|
||||
|
||||
global.DataV.Brush = Brush;
|
||||
}(window));
|
||||
return Brush;
|
||||
});
|
||||
|
||||
1759
lib/charts/bubble.js
1759
lib/charts/bubble.js
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,14 @@
|
||||
/*global EventProxy, d3, Raphael, self, packages, $ */
|
||||
|
||||
//function：弦+文字+高亮某弦
|
||||
define(function (require, exports, module) {
|
||||
var DataV = require('datav');
|
||||
// 弦+文字+高亮某弦
|
||||
;(function (name, definition) {
|
||||
if (typeof define === 'function') { // Module
|
||||
define(definition);
|
||||
} else { // Assign to common namespaces or simply the global object (window)
|
||||
this[name] = definition(function (id) { return this[id];});
|
||||
}
|
||||
})('Bundle', function (require) {
|
||||
var DataV = require('DataV');
|
||||
|
||||
//构造函数，container参数表示在html的哪个容器中绘制该组件
|
||||
//options对象为用户自定义的组件的属性，比如画布大小
|
||||
@ -33,19 +39,6 @@ define(function (require, exports, module) {
|
||||
}
|
||||
});
|
||||
|
||||
//返回
|
||||
Bundle.prototype.checkContainer = function (container) {
|
||||
if (!container) {
|
||||
throw new Error("Please specify which container to render.");
|
||||
}
|
||||
if (typeof (container) === "string") {
|
||||
return document.getElementById(container); //如果container为string，但是html中不存在该container，那么return返回空object
|
||||
} else if (container.nodeName) { //DOM-element
|
||||
return container;
|
||||
}
|
||||
throw new Error("Please specify which container to render.");
|
||||
};
|
||||
|
||||
//设置用户自定义属性
|
||||
Bundle.prototype.setOptions = function (options) {
|
||||
if (options) {
|
||||
@ -76,7 +69,7 @@ define(function (require, exports, module) {
|
||||
Bundle.prototype.setSource = function (source) {
|
||||
if (source[0] && source[0] instanceof Array) {
|
||||
// csv or 2d array source
|
||||
if (source[0][0] === "name") {
|
||||
if (source[0][0] === "name") {
|
||||
source = source.slice(1); // 从第一行开始，第0行舍去
|
||||
}
|
||||
var nData = [];
|
||||
@ -211,7 +204,7 @@ define(function (require, exports, module) {
|
||||
var rotateStr = "";
|
||||
|
||||
//element data cache
|
||||
var nodeRelatedElements = {};// {key: {targetLink: [], sourceLink: [], targetNode: [], sourceNode: []}}
|
||||
var nodeRelatedElements = {};// {key: {targetLink: [], sourceLink: [], targetNode: [], sourceNode: []}}
|
||||
var nodeElements = {}; //{key: Els}
|
||||
var bBoxElements = {}; //{key: Els}
|
||||
|
||||
@ -229,7 +222,7 @@ define(function (require, exports, module) {
|
||||
var mouseoverLink = function () {
|
||||
var current = this;
|
||||
//var color = that.data("color");
|
||||
if (rLinks.preLink) {
|
||||
if (rLinks.preLink) {
|
||||
rLinks.preLink.attr("stroke", that.defaults.color.defaultLineColor)
|
||||
.attr("stroke-width", 1)
|
||||
.attr("stroke-opacity", 0.6);
|
||||
@ -240,7 +233,7 @@ define(function (require, exports, module) {
|
||||
current.attr("stroke", that.defaults.color.lineHoverColor)
|
||||
.attr("stroke-width", 2)
|
||||
.attr("stroke-opacity", 1.0)
|
||||
.toFront(); //把当前弦移到画布最上层
|
||||
.toFront(); //把当前弦移到画布最上层
|
||||
};
|
||||
|
||||
/*
|
||||
@ -250,13 +243,13 @@ define(function (require, exports, module) {
|
||||
current.attr("stroke", that.defaults.color.defaultLineColor)
|
||||
.attr("stroke-width", 1)
|
||||
.attr("stroke-opacity", 0.6);
|
||||
};
|
||||
};
|
||||
*/
|
||||
|
||||
var mouseoverNode = function () {
|
||||
var relatedEl = this.data("relatedElements");
|
||||
//高亮所选节点的文字颜色
|
||||
this.data("relatedNode").attr({"fill": that.defaults.color.nodeHoverColor,
|
||||
this.data("relatedNode").attr({"fill": that.defaults.color.nodeHoverColor,
|
||||
"fill-opacity": 1.0, "font-weight": "600"});
|
||||
//将包围盒颜色设为透明
|
||||
this.attr({"fill": that.defaults.color.nodeHoverColor, "fill-opacity": 0.0/*, "font-weight": "600"*/});
|
||||
@ -265,7 +258,7 @@ define(function (require, exports, module) {
|
||||
d.attr({"stroke": that.defaults.color.importNodesColor, "stroke-width": 1, "stroke-opacity": 0.9})
|
||||
.toFront();
|
||||
});
|
||||
relatedEl.sourceNode.forEach(function (d) {
|
||||
relatedEl.sourceNode.forEach(function (d) {
|
||||
d.attr({"fill": that.defaults.color.importNodesColor, "font-weight": "600"});
|
||||
});
|
||||
relatedEl.targetLink.forEach(function (d) { //set red
|
||||
@ -275,11 +268,11 @@ define(function (require, exports, module) {
|
||||
relatedEl.targetNode.forEach(function (d) {
|
||||
d.attr({"fill": that.defaults.color.exportNodesColor, "font-weight": "600"});
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
var mouseoutNode = function () {
|
||||
var relatedEl = this.data("relatedElements");
|
||||
this.data("relatedNode").attr({"fill": that.defaults.color.defaultWordColor,
|
||||
this.data("relatedNode").attr({"fill": that.defaults.color.defaultWordColor,
|
||||
"font-weight": "400", "fill-opacity": 1.0});
|
||||
relatedEl.targetLink.forEach(function (d) {
|
||||
d.attr({"stroke": that.defaults.color.defaultLineColor, "stroke-width": 1, "stroke-opacity": 0.6});
|
||||
@ -297,7 +290,7 @@ define(function (require, exports, module) {
|
||||
|
||||
for (j = 0; j < nodes.length; j++) {
|
||||
//若为叶子节点
|
||||
if (!nodes[j].children) {
|
||||
if (!nodes[j].children) {
|
||||
locateStr = "T" + that.defaults.radius + "," + that.defaults.radius + "R"; //使用大写T、R、S--绝对，not相对
|
||||
|
||||
//半径: add a padding between lines and words
|
||||
@ -332,7 +325,7 @@ define(function (require, exports, module) {
|
||||
.attr("text", nodes[j].key)
|
||||
//.attr("title", nodes[j].size)
|
||||
.transform(locateStr)
|
||||
.attr("text-anchor", anchor)
|
||||
.attr("text-anchor", anchor)
|
||||
.attr("fill", that.defaults.color.defaultWordColor);
|
||||
|
||||
//获取旋转平移之前文字的bounding box
|
||||
@ -379,13 +372,13 @@ define(function (require, exports, module) {
|
||||
var spline = line(l);
|
||||
var sourceKey = links[i].source.key;
|
||||
var targetKey = links[i].target.key;
|
||||
var tips = "link source: " + sourceKey + "\n"
|
||||
var tips = "link source: " + sourceKey + "\n"
|
||||
+ "link target: " + targetKey;
|
||||
|
||||
linkEl = canvas.path(spline)
|
||||
//.attr("stroke", that.defaults.defaultLineColor)
|
||||
.attr("stroke-opacity", 0.6)
|
||||
.attr("title", tips)
|
||||
.attr("title", tips)
|
||||
.attr("d", spline)
|
||||
.attr("stroke", that.defaults.color.defaultLineColor)
|
||||
.translate(that.defaults.radius, that.defaults.radius)
|
||||
@ -410,16 +403,16 @@ define(function (require, exports, module) {
|
||||
}
|
||||
});
|
||||
|
||||
//bind text words hover event
|
||||
//bind text words hover event
|
||||
for (key in bBoxElements) {
|
||||
if (bBoxElements.hasOwnProperty(key)) {
|
||||
bBoxElements[key].data("relatedElements", nodeRelatedElements[key])
|
||||
.mouseover(mouseoverNode)
|
||||
.mouseout(mouseoutNode);
|
||||
.mouseout(mouseoutNode);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = Bundle;
|
||||
return Bundle;
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/*global Raphael, d3, $, define */
|
||||
;
|
||||
(function (name, definition) {
|
||||
;(function (name, definition) {
|
||||
if (typeof define === 'function') { // Module
|
||||
define(definition);
|
||||
} else { // Assign to common namespaces or simply the global object (window)
|
||||
@ -19,7 +18,7 @@
|
||||
var Chord = DataV.extend(DataV.Chart, {
|
||||
initialize: function (container, options) {
|
||||
this.type = "Chord";
|
||||
this.container = container;
|
||||
this.node = this.checkContainer(container);
|
||||
this.defaults = {};
|
||||
this.matrix = [];
|
||||
this.groupNames = []; //数组：记录每个group的名字
|
||||
@ -46,49 +45,14 @@
|
||||
}
|
||||
});
|
||||
|
||||
/*！
|
||||
* 检查容器
|
||||
* @param {Object} container HTML容器
|
||||
*/
|
||||
Chord.prototype.checkContainer = function (container) {
|
||||
if (!container) {
|
||||
throw new Error("Please specify which container to render.");
|
||||
}
|
||||
if (typeof (container) === "string") {
|
||||
return document.getElementById(container); //如果container为string，但是html中不存在该container，那么return返回空object
|
||||
} else if (container.nodeName) { //DOM-element
|
||||
return container;
|
||||
}
|
||||
throw new Error("Please specify which container to render.");
|
||||
};
|
||||
|
||||
/**
|
||||
* 设定用户自定义的属性
|
||||
* @param {Object} options 用户属性
|
||||
*/
|
||||
Chord.prototype.setOptions = function (options) {
|
||||
if (options) {
|
||||
var prop;
|
||||
for (prop in options) {
|
||||
if (options.hasOwnProperty(prop)) {
|
||||
this.defaults[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建画布
|
||||
*/
|
||||
Chord.prototype.createCanvas = function () {
|
||||
if (!this.container) {
|
||||
throw new Error("Please specify on which container to render the chart.");
|
||||
}
|
||||
this.canvas = new Raphael(this.container, this.defaults.width, this.defaults.height);
|
||||
this.canvasF = document.getElementById(this.container);
|
||||
canvasStyle = this.canvasF.style;
|
||||
this.canvas = new Raphael(this.node, this.defaults.width, this.defaults.height);
|
||||
canvasStyle = this.node.style;
|
||||
canvasStyle.position = "relative";
|
||||
this.floatTag = DataV.FloatTag()(this.canvasF);
|
||||
this.floatTag = DataV.FloatTag()(this.node);
|
||||
this.floatTag.css({
|
||||
"visibility": "hidden"
|
||||
});
|
||||
@ -248,10 +212,6 @@
|
||||
*/
|
||||
Chord.prototype.layout = function () {
|
||||
var floatTag = this.floatTag;
|
||||
if (!this.container) {
|
||||
throw new Error("Please specify on which container to render the chart.");
|
||||
}
|
||||
|
||||
var that = this;
|
||||
|
||||
that.canvas.clear();
|
||||
|
||||
@ -8,20 +8,22 @@
|
||||
}
|
||||
})('Parallel', function (require) {
|
||||
var DataV = require('DataV');
|
||||
var Axis = require('Axis');
|
||||
var Brush = require('Brush');
|
||||
|
||||
var Parallel = DataV.extend(DataV.Chart, {
|
||||
initialize: function (node, options) {
|
||||
this.type = "Parallel";
|
||||
this.node = this.checkNode(node);
|
||||
this.defaults = {};
|
||||
|
||||
|
||||
// Properties
|
||||
this.allDimensions = [];
|
||||
this.dimensions = [];
|
||||
this.dimensionType = {};
|
||||
this.dimensionDomain = {};
|
||||
this.dimensionExtent = {};
|
||||
|
||||
|
||||
// Canvas
|
||||
this.defaults.width = 750;
|
||||
this.defaults.height = 500;
|
||||
@ -305,21 +307,22 @@
|
||||
|
||||
Parallel.prototype.generatePaths = function () {
|
||||
var conf = this.defaults;
|
||||
var axis = DataV.Axis().orient("left");
|
||||
var axis = Axis().orient("left");
|
||||
|
||||
var m = conf.marginWidth;
|
||||
|
||||
var paper = this.canvas;
|
||||
|
||||
this.bg = paper.set();
|
||||
for (var i=0, l=this.source.length; i<l; i++) {
|
||||
var i, l;
|
||||
for (i = 0, l = this.source.length; i<l; i++) {
|
||||
var line = this.source[i];
|
||||
this.bg.push(paper.path(this.path(line)));
|
||||
}
|
||||
this.bg.attr(conf.backgroundAttr).attr({transform: "t" + m[3] + ',0'});
|
||||
|
||||
this.fg = paper.set();
|
||||
for (var i=0, l=this.source.length; i<l; i++) {
|
||||
for (i = 0, l = this.source.length; i<l; i++) {
|
||||
var line = this.source[i];
|
||||
this.fg.push(paper.path(this.path(line)));
|
||||
}
|
||||
@ -327,7 +330,7 @@
|
||||
|
||||
var dimensions = this.dimensions;
|
||||
|
||||
for(var i=0, l=dimensions.length; i<l; i++){
|
||||
for(i = 0, l = dimensions.length; i<l; i++){
|
||||
var ax=axis.scale(this.y[dimensions[i]])(paper);
|
||||
ax.push(paper.text(0, m[0] - 12, dimensions[i]).attr({"text-anchor": "middle"}));
|
||||
ax.attr({transform: "t" + (m[3] + this.x.range()[i] ) + ',0'});
|
||||
@ -408,9 +411,9 @@
|
||||
|
||||
var b, start, end, temp;
|
||||
|
||||
for (var i=0, l=dimensions.length; i<l; i++) {
|
||||
for (var i = 0, l = dimensions.length; i<l; i++) {
|
||||
dimen = dimensions[i];
|
||||
b = DataV.Brush().y(this.y2[dimen])
|
||||
b = Brush().y(this.y2[dimen])
|
||||
.left(m[3] + this.x.range()[i] - xInterval/2)
|
||||
.width(xInterval)
|
||||
.backgroundAttr({"opacity": 0, "fill": "white"})
|
||||
@ -460,10 +463,6 @@
|
||||
};
|
||||
|
||||
Parallel.prototype.createCanvas = function () {
|
||||
if (!this.node) {
|
||||
throw new Error("Please specify which node to render.");
|
||||
}
|
||||
|
||||
var conf = this.defaults;
|
||||
this.node.style.position = "relative";
|
||||
this.canvas = Raphael(this.node, conf.width, conf.height);
|
||||
@ -499,9 +498,6 @@
|
||||
};
|
||||
|
||||
Parallel.prototype.render = function (options) {
|
||||
if (!this.node) {
|
||||
throw new Error("Please specify which node to render.");
|
||||
}
|
||||
this.setOptions(options);
|
||||
this.layout();
|
||||
this.generatePaths();
|
||||
|
||||
@ -15,6 +15,10 @@
|
||||
/*
|
||||
* Stream构造函数
|
||||
* Create stream in a dom node with id "chart", width is 500; height is 600px;
|
||||
* Options:
|
||||
*
|
||||
* - `width` 宽度，默认为节点宽度
|
||||
*
|
||||
* Examples:
|
||||
* ```
|
||||
* var stream = new Stream("chart", {"width": 500, "height": 600});
|
||||
@ -61,7 +65,7 @@
|
||||
this.defaults.margin = [0, 40, 0, 40];
|
||||
|
||||
this.defaults.customEventHandle = {"mousemove": null};
|
||||
|
||||
|
||||
//test related
|
||||
this.defaults.testMakeup = false;
|
||||
this.defaults.testDays = 30;
|
||||
|
||||
@ -330,13 +330,13 @@
|
||||
|
||||
/**
|
||||
* 设置自定义选项
|
||||
* @param {Object} options 自定义选项对象
|
||||
* @return {Object} 覆盖后的图表选项对象
|
||||
* Examples:
|
||||
* Set width 500px, height 600px;
|
||||
* ```
|
||||
* {"width": 500, "height": 600}
|
||||
* ```
|
||||
* @param {Object} options 自定义选项对象
|
||||
* @return {Object} 覆盖后的图表选项对象
|
||||
*/
|
||||
Chart.prototype.setOptions = function (options) {
|
||||
return _.extend(this.defaults, options);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user