mirror of
https://github.com/TBEDP/datavjs.git
synced 2025-12-08 19:45:52 +00:00
Update bundle
This commit is contained in:
Jackson Tian
parent
8cd93deb42
commit
ba9aba4c6a
@ -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,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;
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user