Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 af0b5a2f 编写于 作者: L lang
浏览文件
操作

force加入每个节点的fixX, fixY，initial配置项模拟树形结构

上级 ad0e0829
隐藏空白更改
内联 并排
Showing with 256 addition and 16 deletion
doc/example/force1.html
浏览文件 @ af0b5a2f
......@@ -142,6 +142,7 @@ option = {
density : 0.05,
attractiveness: 1.2,
linkSymbol: 'arrow',
draggable: false,
nodes:[
{category:0, name: '乔布斯', value : 10},
{category:1, name: '丽萨-乔布斯',value : 2},
......
doc/example/force5.html 0 → 100644
浏览文件 @ af0b5a2f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="linzhifeng@baidu.com">
<script src="../asset/js/esl/esl.js"></script>
<script src="../asset/js/codemirror.js"></script>
<script src="../asset/js/javascript.js"></script>
<link href="../asset/css/bootstrap.css" rel="stylesheet">
<link href="../asset/css/bootstrap-responsive.css" rel="stylesheet">
<link href="../asset/css/codemirror.css" rel="stylesheet">
<link href="../asset/css/monokai.css" rel="stylesheet">
<link href="../asset/css/echartsHome.css" rel="stylesheet">
<link rel="shortcut icon" href="../asset/ico/favicon.png">
</head>
<body>
<!-- NAVBAR
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="../../index.html">ECharts</a>
<div class="nav-collapse collapse">
<a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>
<ul class="nav">
<li><a href="../../index.html"><i class="icon-home icon-white"></i> Home</a></li>
<li class="active"><a href="../example.html" class="active">Example</a></li>
<li><a href="../doc.html" >API &amp; Doc</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="last-release-link" href=""> </a></li>
<li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
<li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
<li class="divider"></li>
<!--li class="nav-header">Library</li-->
<li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar-wrapper -->
<div class="container-fluid">
<div class="row-fluid">
<div id="sidebar-code" class="span4">
<div class="well sidebar-nav">
<div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" id ="icon-resize" ></a>option</div>
<textarea id="code" name="code">
var nodes = [];
var links = [];
var constMaxDepth = 4;
var constMaxChildren = 3;
var constMinChildren = 2;
var constMaxRadius = 10;
var constMinRadius = 2;
var mainDom = document.getElementById('main');
function rangeRandom(min, max) {
return Math.random() * (max - min) + min;
}
function createRandomNode(depth) {
var x = mainDom.clientWidth / 2 + (.5 - Math.random()) * 200;
var y = (mainDom.clientHeight - 20) * depth / (constMaxDepth + 1) + 20;
var node = {
name : 'NODE_' + nodes.length,
value : rangeRandom(constMinRadius, constMaxRadius),
// Custom properties
id : nodes.length,
depth : depth,
initial : [x, y],
fixY : true,
category : depth === constMaxDepth ? 0 : 1
}
nodes.push(node);
return node;
}
function forceMockThreeData() {
var depth = 0;
var rootNode = createRandomNode(0);
rootNode.name = 'ROOT';
rootNode.category = 2;
function mock(parentNode, depth) {
var nChildren = Math.round(rangeRandom(constMinChildren, constMaxChildren));
for (var i = 0; i < nChildren; i++) {
var childNode = createRandomNode(depth);
links.push({
source : parentNode.id,
target : childNode.id,
weight : 1
});
if (depth < constMaxDepth) {
mock(childNode, depth + 1);
}
}
}
mock(rootNode, 1);
}
forceMockThreeData();
option = {
title : {
text: 'Force',
subtext: 'Force-directed tree',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
legend: {
x: 'left',
data:['叶子节点','非叶子节点', '根节点']
},
series : [
{
type:'force',
name : "Force tree",
categories : [
{
name: '叶子节点',
itemStyle: {
normal: {
color : '#ff7f50'
}
}
},
{
name: '非叶子节点',
itemStyle: {
normal: {
color : '#6f57bc'
}
}
},
{
name: '根节点',
itemStyle: {
normal: {
color : '#af0000'
}
}
}
],
itemStyle: {
normal: {
label: {
show: false
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.6)',
lineWidth : 1
}
}
},
minRadius : constMinRadius,
maxRadius : constMaxRadius,
centripetal : 0.3,
density : 1,
attractiveness: 1.2,
nodes : nodes,
links : links
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="span8">
<div id="main" class="main"></div>
<div>
<button onclick="refresh(true)">Refresh ~</button>
<span id='wrong-message' style="color:red"></span>
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>&copy; 2014 <a href="http://efe.baidu.com" target="_blank">EFE</a> &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> &middot; <a href="../changelog.html" target="_blank">Changelog</a></p>
</footer>
</div><!--/.fluid-container-->
<script src="../asset/js/jquery.js"></script>
<script src="../asset/js/bootstrap-transition.js"></script>
<script src="../asset/js/bootstrap-alert.js"></script>
<script src="../asset/js/bootstrap-modal.js"></script>
<script src="../asset/js/bootstrap-dropdown.js"></script>
<script src="../asset/js/bootstrap-scrollspy.js"></script>
<script src="../asset/js/bootstrap-tab.js"></script>
<script src="../asset/js/bootstrap-tooltip.js"></script>
<script src="../asset/js/bootstrap-popover.js"></script>
<script src="../asset/js/bootstrap-button.js"></script>
<script src="../asset/js/bootstrap-collapse.js"></script>
<script src="../asset/js/bootstrap-carousel.js"></script>
<script src="../asset/js/bootstrap-typeahead.js"></script>
<script src="../asset/js/echartsExample.js"></script>
</body>
</html>
\ No newline at end of file
src/chart/force.js
浏览文件 @ af0b5a2f
......@@ -267,10 +267,10 @@ define(function(require) {
var r = radius[i];
var initPos;
if (node.initial !== undefined) {
initPos = node.initial;
} else if (nodeInitialPos[node.name] !== undefined) {
if (nodeInitialPos[node.name] !== undefined) {
initPos = nodeInitialPos[node.name];
} else if (node.initial !== undefined) {
initPos = node.initial;
} else {
initPos = _randomInSquare(
viewportWidth/2, viewportHeight/2, initSize
......@@ -371,10 +371,12 @@ define(function(require) {
}
// 拖拽特性
self.setCalculable(shape);
shape.dragEnableTime = 0;
shape.ondragstart = self.shapeHandler.ondragstart;
shape.draggable = true;
if (forceSerie.draggable) {
self.setCalculable(shape);
shape.dragEnableTime = 0;
shape.ondragstart = self.shapeHandler.ondragstart;
shape.draggable = forceSerie.draggable;
}
nodeShapes.push(shape);
self.shapeList.push(shape);
......@@ -635,15 +637,13 @@ define(function(require) {
var velocity = [];
// 计算位置(verlet积分)
for (var i = 0, l = nodePositions.length; i < l; i++) {
var node = filteredNodes[i];
var name = filteredNodes[i].name;
if (filteredNodes[i].fixed) {
// 拖拽同步
vec2.set(nodePositions[i], mouseX, mouseY);
vec2.set(nodePrePositions[i], mouseX, mouseY);
vec2.set(nodeShapes[i].position, mouseX, mouseY);
if (filteredNodes[i].initial !== undefined) {
vec2.set(filteredNodes[i].initial, mouseX, mouseY);
}
if (nodeInitialPos[name] !== undefined) {
vec2.set(nodeInitialPos[name], mouseX, mouseY);
}
......@@ -666,18 +666,21 @@ define(function(require) {
velocity[1] = Math.max(Math.min(velocity[1], 100), -100);
vec2.add(p, p, velocity);
if (node.fixY && node.initial) {
p[1] = node.initial[1];
}
if (node.fixX && node.initial) {
p[0] = node.initial[0];
}
vec2.copy(nodeShapes[i].position, p);
if (name) {
if (nodeInitialPos[name] === undefined) {
if (!nodeInitialPos[name]) {
nodeInitialPos[name] = vec2.create();
}
vec2.copy(nodeInitialPos[name], p);
} else {
if (filteredNodes[i].initial === undefined) {
filteredNodes[i].initial = vec2.create();
}
vec2.copy(filteredNodes[i].initial, p);
}
// if(isNaN(p[0]) || isNaN(p[1])){
......@@ -772,6 +775,9 @@ define(function(require) {
// 没有在当前实例上发生拖拽行为则直接返回
return;
}
if (!(forceSerie && forceSerie.draggable)) {
return;
}
var shape = param.target;
var idx = shape.__forceIndex;
var node = filteredNodes[idx];
......
src/config.js
浏览文件 @ af0b5a2f
......@@ -719,6 +719,7 @@ define(function() {
coolDown : 0.99,
linkSymbol: null,
linkSymbolSize: [10, 15],
draggable: true,
// 分类里如果有样式会覆盖节点默认样式
categories : [],
itemStyle: {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或