Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
强哥很慌张
Echarts
提交
c3329e42
E
Echarts
项目概览
强哥很慌张
/
Echarts
通知
8
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
E
Echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c3329e42
编写于
6月 23, 2020
作者:
1
100pah
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: rename $transition $enterFrom $leaveTo => transition enterFrom leaveTo.
上级
a7d4f698
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
140 addition
and
68 deletion
+140
-68
src/chart/custom.ts
src/chart/custom.ts
+38
-28
test/custom-transition.html
test/custom-transition.html
+28
-28
test/custom-transition2.html
test/custom-transition2.html
+74
-12
未找到文件。
src/chart/custom.ts
浏览文件 @
c3329e42
...
...
@@ -78,6 +78,7 @@ import {
import
Transformable
from
'
zrender/src/core/Transformable
'
;
import
{
ItemStyleProps
}
from
'
../model/mixin/itemStyle
'
;
import
{
cloneValue
}
from
'
zrender/src/animation/Animator
'
;
import
{
number
}
from
'
../export
'
;
const
inner
=
makeInner
<
{
...
...
@@ -109,14 +110,14 @@ type TransitionAnyProps = string | string[];
type
TransitionTransformProps
=
TransformProps
|
TransformProps
[];
// Do not declare "Dictionary" in TransitionAnyOption to restrict the type check.
type
TransitionAnyOption
=
{
$
transition
?:
TransitionAnyProps
;
$
enterFrom
?:
Dictionary
<
unknown
>
;
$
leaveTo
?:
Dictionary
<
unknown
>
;
transition
?:
TransitionAnyProps
;
enterFrom
?:
Dictionary
<
unknown
>
;
leaveTo
?:
Dictionary
<
unknown
>
;
};
type
TransitionTransformOption
=
{
$
transition
?:
TransitionTransformProps
;
$
enterFrom
?:
Dictionary
<
unknown
>
;
$
leaveTo
?:
Dictionary
<
unknown
>
;
transition
?:
TransitionTransformProps
;
enterFrom
?:
Dictionary
<
unknown
>
;
leaveTo
?:
Dictionary
<
unknown
>
;
};
interface
CustomBaseElementOption
extends
Partial
<
Pick
<
...
...
@@ -610,12 +611,12 @@ function createEl(elOption: CustomElementOption): Element {
* ---------------------------------------------
* [STRATEGY_TRANSITION] The rule of transition:
* + For props on the root level of a element:
* If there is no `
$
transition` specified, tansform props will be transitioned by default,
* If there is no `transition` specified, tansform props will be transitioned by default,
* which is the same as the previous setting in echarts4 and suitable for the scenario
* of dataZoom change.
* If `
$
transition` specified, only the specified props will be transitioned.
* If `transition` specified, only the specified props will be transitioned.
* + For props in `shape` and `style`:
* Only props specified in `
$
transition` will be transitioned.
* Only props specified in `transition` will be transitioned.
* + Break:
* Since ec5, do not make transition to shape by default, because it might result in
* performance issue (especially `points` of polygon) and do not necessary in most cases.
...
...
@@ -738,22 +739,22 @@ function prepareShapeUpdate(
const
elShape
=
(
el
as
LooseElementProps
).
shape
;
let
tranFromShapeProps
:
LooseElementProps
[
'
shape
'
];
const
enterFrom
=
shapeOpt
.
$
enterFrom
;
const
enterFrom
=
shapeOpt
.
enterFrom
;
if
(
isInit
&&
enterFrom
)
{
!
tranFromShapeProps
&&
(
tranFromShapeProps
=
transFromProps
.
shape
=
{});
const
enterFromKeys
=
keys
(
enterFrom
);
for
(
let
i
=
0
;
i
<
enterFromKeys
.
length
;
i
++
)
{
// `
$
enterFrom` props are not necessarily also declared in `shape`/`style`/...,
// for example, `opacity` can only declared in `
$
enterFrom` but not in `style`.
// `enterFrom` props are not necessarily also declared in `shape`/`style`/...,
// for example, `opacity` can only declared in `enterFrom` but not in `style`.
const
key
=
enterFromKeys
[
i
];
// Do not clone, animator will perform that clone.
tranFromShapeProps
[
key
]
=
enterFrom
[
key
];
}
}
if
(
!
isInit
&&
elShape
&&
shapeOpt
.
$
transition
)
{
if
(
!
isInit
&&
elShape
&&
shapeOpt
.
transition
)
{
!
tranFromShapeProps
&&
(
tranFromShapeProps
=
transFromProps
.
shape
=
{});
const
transitionKeys
=
normalizeToArray
(
shapeOpt
.
$
transition
);
const
transitionKeys
=
normalizeToArray
(
shapeOpt
.
transition
);
for
(
let
i
=
0
;
i
<
transitionKeys
.
length
;
i
++
)
{
const
key
=
transitionKeys
[
i
];
const
elVal
=
elShape
[
key
];
...
...
@@ -774,7 +775,7 @@ function prepareShapeUpdate(
allPropsShape
[
key
]
=
cloneValue
((
shapeOpt
as
any
)[
key
]);
}
const
leaveTo
=
shapeOpt
.
$
leaveTo
;
const
leaveTo
=
shapeOpt
.
leaveTo
;
if
(
leaveTo
)
{
const
leaveToProps
=
getOrCreateLeaveToPropsFromEl
(
el
);
const
leaveToShapeProps
=
leaveToProps
.
shape
||
(
leaveToProps
.
shape
=
{});
...
...
@@ -794,13 +795,13 @@ function prepareTransformUpdate(
transFromProps
:
ElementProps
,
isInit
:
boolean
):
void
{
const
enterFrom
=
elOption
.
$
enterFrom
;
const
enterFrom
=
elOption
.
enterFrom
;
if
(
isInit
&&
enterFrom
)
{
const
enterFromKeys
=
keys
(
enterFrom
);
for
(
let
i
=
0
;
i
<
enterFromKeys
.
length
;
i
++
)
{
const
key
=
enterFromKeys
[
i
]
as
TransformProps
;
if
(
__DEV__
)
{
checkTransformPropRefer
(
key
,
'
el.
$
enterFrom
'
);
checkTransformPropRefer
(
key
,
'
el.enterFrom
'
);
}
// Do not clone, animator will perform that clone.
transFromProps
[
key
]
=
enterFrom
[
key
]
as
number
;
...
...
@@ -808,13 +809,13 @@ function prepareTransformUpdate(
}
if
(
!
isInit
)
{
if
(
elOption
.
$
transition
)
{
const
transitionKeys
=
normalizeToArray
(
elOption
.
$
transition
);
if
(
elOption
.
transition
)
{
const
transitionKeys
=
normalizeToArray
(
elOption
.
transition
);
for
(
let
i
=
0
;
i
<
transitionKeys
.
length
;
i
++
)
{
const
key
=
transitionKeys
[
i
];
const
elVal
=
el
[
key
];
if
(
__DEV__
)
{
checkTransformPropRefer
(
key
,
'
el.
$
transition
'
);
checkTransformPropRefer
(
key
,
'
el.transition
'
);
checkTansitionRefer
(
key
,
elOption
[
key
],
elVal
);
}
// Do not clone, see `checkTansitionRefer`.
...
...
@@ -840,14 +841,14 @@ function prepareTransformUpdate(
setTransProp
(
elOption
,
allProps
,
'
originY
'
);
setTransProp
(
elOption
,
allProps
,
'
rotation
'
);
const
leaveTo
=
elOption
.
$
leaveTo
;
const
leaveTo
=
elOption
.
leaveTo
;
if
(
leaveTo
)
{
const
leaveToProps
=
getOrCreateLeaveToPropsFromEl
(
el
);
const
leaveToKeys
=
keys
(
leaveTo
);
for
(
let
i
=
0
;
i
<
leaveToKeys
.
length
;
i
++
)
{
const
key
=
leaveToKeys
[
i
]
as
TransformProps
;
if
(
__DEV__
)
{
checkTransformPropRefer
(
key
,
'
el.
$
leaveTo
'
);
checkTransformPropRefer
(
key
,
'
el.leaveTo
'
);
}
leaveToProps
[
key
]
=
leaveTo
[
key
]
as
number
;
}
...
...
@@ -868,7 +869,7 @@ function prepareStyleUpdate(
const
elStyle
=
(
el
as
LooseElementProps
).
style
as
LooseElementProps
[
'
style
'
];
let
transFromStyleProps
:
LooseElementProps
[
'
style
'
];
const
enterFrom
=
styleOpt
.
$
enterFrom
;
const
enterFrom
=
styleOpt
.
enterFrom
;
if
(
isInit
&&
enterFrom
)
{
const
enterFromKeys
=
keys
(
enterFrom
);
!
transFromStyleProps
&&
(
transFromStyleProps
=
transFromProps
.
style
=
{});
...
...
@@ -879,8 +880,8 @@ function prepareStyleUpdate(
}
}
if
(
!
isInit
&&
elStyle
&&
styleOpt
.
$
transition
)
{
const
transitionKeys
=
normalizeToArray
(
styleOpt
.
$
transition
);
if
(
!
isInit
&&
elStyle
&&
styleOpt
.
transition
)
{
const
transitionKeys
=
normalizeToArray
(
styleOpt
.
transition
);
!
transFromStyleProps
&&
(
transFromStyleProps
=
transFromProps
.
style
=
{});
for
(
let
i
=
0
;
i
<
transitionKeys
.
length
;
i
++
)
{
const
key
=
transitionKeys
[
i
];
...
...
@@ -893,7 +894,7 @@ function prepareStyleUpdate(
}
}
const
leaveTo
=
styleOpt
.
$
leaveTo
;
const
leaveTo
=
styleOpt
.
leaveTo
;
if
(
leaveTo
)
{
const
leaveToKeys
=
keys
(
leaveTo
);
const
leaveToProps
=
getOrCreateLeaveToPropsFromEl
(
el
);
...
...
@@ -941,12 +942,16 @@ const tmpDuringScope = {} as {
const
customDuringAPI
=
{
// Usually other props do not need to be changed in animation during.
setTransform
(
key
:
TransformProps
,
val
:
unknown
)
{
assert
(
hasOwn
(
TRANSFORM_PROPS
,
key
),
'
Only
'
+
transformPropNamesStr
+
'
available in `setTransform`.
'
);
if
(
__DEV__
)
{
assert
(
hasOwn
(
TRANSFORM_PROPS
,
key
),
'
Only
'
+
transformPropNamesStr
+
'
available in `setTransform`.
'
);
}
tmpDuringScope
.
el
[
key
]
=
val
as
number
;
return
this
;
},
getTransform
(
key
:
TransformProps
):
unknown
{
assert
(
hasOwn
(
TRANSFORM_PROPS
,
key
),
'
Only
'
+
transformPropNamesStr
+
'
available in `getTransform`.
'
);
if
(
__DEV__
)
{
assert
(
hasOwn
(
TRANSFORM_PROPS
,
key
),
'
Only
'
+
transformPropNamesStr
+
'
available in `getTransform`.
'
);
}
return
tmpDuringScope
.
el
[
key
];
},
setShape
(
key
:
string
,
val
:
unknown
)
{
...
...
@@ -979,6 +984,11 @@ const customDuringAPI = {
};
function
elUpdateDuringAnimation
(
this
:
Element
,
key
:
string
):
void
{
// Do not provide "percent" until some requirements come.
// Because consider thies case:
// enterFrom: {x: 100, y: 30}, transition: 'x'.
// And enter duration is different from update duration.
// Thus it might be confused about the meaning of "percent" in during callback.
const
innerEl
=
inner
(
this
);
// FIXME `this.markRedraw();` directly ?
innerEl
.
orginalDuring
.
call
(
this
,
key
);
...
...
test/custom-transition.html
浏览文件 @
c3329e42
...
...
@@ -179,7 +179,7 @@ under the License.
shape
:
{
points
:
makeShapePoints
(
api
,
valOnRadius
,
valOnAngle
),
valOnAngle
:
valOnAngle
,
$
transition
:
'
valOnAngle
'
transition
:
'
valOnAngle
'
},
style
:
{
lineWidth
:
1
,
...
...
@@ -219,7 +219,7 @@ under the License.
y
:
point
[
1
],
shape
:
{
valOnAngle
:
valOnAngle
,
$
transition
:
'
valOnAngle
'
transition
:
'
valOnAngle
'
},
style
:
{
text
:
getText
(
valOnAngle
),
...
...
@@ -407,7 +407,7 @@ under the License.
widthRadius
:
widthRadius
,
startRadius
:
startRadius
,
endRadian
:
endRadian
,
$
transition
:
[
'
widthRadius
'
,
'
startRadius
'
,
'
endRadian
'
]
transition
:
[
'
widthRadius
'
,
'
startRadius
'
,
'
endRadian
'
]
},
style
:
{
lineWidth
:
1
,
...
...
@@ -464,7 +464,7 @@ under the License.
startRadius
:
startRadius
,
endRadian
:
endRadian
,
widthRadius
:
widthRadius
,
$
transition
:
[
'
startRadius
'
,
'
endRadian
'
,
'
widthRadius
'
]
transition
:
[
'
startRadius
'
,
'
endRadian
'
,
'
widthRadius
'
]
},
style
:
{
text
:
makeText
(
endRadian
),
...
...
@@ -652,8 +652,8 @@ under the License.
// polor: anticlockwise-positive radian
// sector: clockwise-positive radian
endAngle
:
-
polarEndRadian
,
$
transition
:
'
endAngle
'
,
$
enterFrom
:
{
endAngle
:
0
}
transition
:
'
endAngle
'
,
enterFrom
:
{
endAngle
:
0
}
}
}
},
{
...
...
@@ -664,8 +664,8 @@ under the License.
shape
:
{
points
:
makePionterPoints
(
params
,
polarEndRadian
),
polarEndRadian
:
polarEndRadian
,
$
transition
:
'
polarEndRadian
'
,
$
enterFrom
:
{
polarEndRadian
:
0
}
transition
:
'
polarEndRadian
'
,
enterFrom
:
{
polarEndRadian
:
0
}
},
during
:
function
(
apiDuring
)
{
apiDuring
.
setShape
(
...
...
@@ -692,8 +692,8 @@ under the License.
type
:
'
text
'
,
shape
:
{
valOnRadian
:
valOnRadian
,
$
transition
:
'
valOnRadian
'
,
$
enterFrom
:
{
valOnRadian
:
0
}
transition
:
'
valOnRadian
'
,
enterFrom
:
{
valOnRadian
:
0
}
},
style
:
{
text
:
makeText
(
valOnRadian
),
...
...
@@ -703,7 +703,7 @@ under the License.
fill
:
'
rgb(0,50,190)
'
,
align
:
'
center
'
,
verticalAlign
:
'
middle
'
,
$
enterFrom
:
{
opacity
:
0
}
enterFrom
:
{
opacity
:
0
}
},
during
:
function
(
apiDuring
)
{
apiDuring
.
setStyle
(
'
text
'
,
makeText
(
apiDuring
.
getShape
(
'
valOnRadian
'
)));
...
...
@@ -961,7 +961,7 @@ under the License.
},
style
:
{
fill
:
'
blue
'
,
//
$
enterFrom: { opacity: 0 }
// enterFrom: { opacity: 0 }
}
},
{
type
:
'
circle
'
,
...
...
@@ -972,7 +972,7 @@ under the License.
},
style
:
{
fill
:
'
green
'
,
//
$
enterFrom: { opacity: 0 }
// enterFrom: { opacity: 0 }
},
textConfig
:
{
position
:
'
bottom
'
...
...
@@ -981,7 +981,7 @@ under the License.
style
:
{
text
:
'
xxxx
'
,
fill
:
'
black
'
,
//
$
enterFrom: { opacity: 0 }
// enterFrom: { opacity: 0 }
}
}
}]
...
...
@@ -1078,7 +1078,7 @@ under the License.
type
:
'
group
'
,
x
:
pos
[
0
],
y
:
pos
[
1
],
$
enterFrom
:
{
enterFrom
:
{
y
:
0
},
children
:
[{
...
...
@@ -1164,7 +1164,7 @@ under the License.
y
:
params
.
coordSys
.
y
,
width
:
params
.
coordSys
.
width
,
height
:
params
.
coordSys
.
height
,
$
enterFrom
:
{
width
:
0
}
enterFrom
:
{
width
:
0
}
}
}
};
...
...
@@ -1225,7 +1225,7 @@ under the License.
style
:
{
image
:
weatherIcons
.
Showers
,
width
:
width
,
$
transition
:
'
width
'
transition
:
'
width
'
}
};
},
...
...
@@ -1277,7 +1277,7 @@ under the License.
x
:
pos
[
0
],
y
:
pos
[
1
],
rotation
:
pos
[
0
]
/
500
*
Math
.
PI
,
$
transition
:
[
'
rotation
'
],
transition
:
[
'
rotation
'
],
originX
:
-
50
,
originY
:
50
,
children
:
[{
...
...
@@ -1291,7 +1291,7 @@ under the License.
},
style
:
{
fill
:
'
green
'
,
$
enterFrom
:
{
opacity
:
0
}
enterFrom
:
{
opacity
:
0
}
}
},
{
type
:
'
circle
'
,
...
...
@@ -1302,7 +1302,7 @@ under the License.
},
style
:
{
fill
:
'
blue
'
,
$
enterFrom
:
{
opacity
:
0
}
enterFrom
:
{
opacity
:
0
}
},
textConfig
:
{
position
:
'
bottom
'
...
...
@@ -1311,7 +1311,7 @@ under the License.
style
:
{
text
:
'
xxxx
'
,
fill
:
'
black
'
,
$
enterFrom
:
{
opacity
:
0
}
enterFrom
:
{
opacity
:
0
}
}
}
}]
...
...
@@ -1363,7 +1363,7 @@ under the License.
return
{
type
:
'
rect
'
,
position
:
pos
,
$
transition
:
[],
transition
:
[],
shape
:
{
x
:
-
50
,
y
:
50
,
...
...
@@ -1373,7 +1373,7 @@ under the License.
},
style
:
{
fill
:
'
green
'
,
$
enterFrom
:
{
opacity
:
0
}
enterFrom
:
{
opacity
:
0
}
}
};
},
...
...
@@ -1426,10 +1426,10 @@ under the License.
x
:
pos
[
0
],
y
:
pos
[
1
],
rotation
:
pos
[
0
]
/
500
*
Math
.
PI
,
$
transition
:
[
'
x
'
,
'
y
'
,
'
rotation
'
],
transition
:
[
'
x
'
,
'
y
'
,
'
rotation
'
],
originX
:
-
50
,
originY
:
50
,
$
leaveTo
:
{
scaleX
:
0
,
scaleY
:
0
},
leaveTo
:
{
scaleX
:
0
,
scaleY
:
0
},
children
:
[{
type
:
'
rect
'
,
shape
:
{
...
...
@@ -1441,7 +1441,7 @@ under the License.
},
style
:
{
fill
:
'
green
'
,
$
enterFrom
:
{
opacity
:
0
}
enterFrom
:
{
opacity
:
0
}
}
},
{
type
:
'
circle
'
,
...
...
@@ -1452,7 +1452,7 @@ under the License.
},
style
:
{
fill
:
'
blue
'
,
$
enterFrom
:
{
opacity
:
0
}
enterFrom
:
{
opacity
:
0
}
},
textConfig
:
{
position
:
'
bottom
'
...
...
@@ -1461,7 +1461,7 @@ under the License.
style
:
{
text
:
'
xxxx
'
,
fill
:
'
black
'
,
$
enterFrom
:
{
opacity
:
0
}
enterFrom
:
{
opacity
:
0
}
}
}
}]
...
...
test/custom-transition2.html
浏览文件 @
c3329e42
...
...
@@ -75,7 +75,7 @@ under the License.
}];
var
colorAll
=
[
'
#37A2DA
'
,
'
#e06343
'
,
'
#37a354
'
,
'
#b55dba
'
,
'
#b5bd48
'
,
'
#8378EA
'
,
'
#96BFFF
'
'
#
bbb
'
,
'
#
37A2DA
'
,
'
#e06343
'
,
'
#37a354
'
,
'
#b55dba
'
,
'
#b5bd48
'
,
'
#8378EA
'
,
'
#96BFFF
'
];
var
ANIMATION_DURATION_UPDATE
=
1500
;
...
...
@@ -106,13 +106,18 @@ under the License.
for
(
var
stepIdx
=
0
;
stepIdx
<
allStepsData
.
length
;
stepIdx
++
)
{
var
stepData
=
allStepsData
[
stepIdx
];
var
ptsInCluster
=
stepData
.
pointsInCluster
;
var
newestClusterIdx
=
ptsInCluster
.
length
-
1
;
var
stepResult
=
{
centroids
:
stepData
.
centroids
,
points
:
[]
points
:
[],
newestClusterIndex
:
newestClusterIdx
,
newestClusterMaxAssessmentIndex
:
-
1
};
result
.
push
(
stepResult
);
var
ptsInCluster
=
stepData
.
pointsInCluster
;
var
newestClusterIdx
=
ptsInCluster
.
length
-
1
;
for
(
var
cIdx
=
0
;
cIdx
<
ptsInCluster
.
length
;
cIdx
++
)
{
var
clusterPoints
=
ptsInCluster
[
cIdx
];
for
(
var
i
=
0
;
i
<
clusterPoints
.
length
;
i
++
)
{
...
...
@@ -125,6 +130,15 @@ under the License.
stepResult
.
points
[
ptsIdx
]
=
[
point
[
0
],
point
[
1
],
cIdx
,
newestClusterIdx
];
}
}
var
assessment
=
-
Infinity
;
for
(
var
i
=
0
;
i
<
stepData
.
clusterAssment
.
length
;
i
++
)
{
var
assessmentRecord
=
stepData
.
clusterAssment
[
i
];
if
(
assessmentRecord
[
0
]
===
newestClusterIdx
&&
assessmentRecord
[
1
]
>
assessment
)
{
assessment
=
assessmentRecord
[
1
];
stepResult
.
newestClusterMaxAssessmentIndex
=
i
;
}
}
}
return
result
;
}
...
...
@@ -138,7 +152,7 @@ under the License.
cx
:
0
,
cy
:
0
,
r
:
10
,
$
transition
:
[]
transition
:
[]
};
var
contentColor
=
colorAll
[
clusterIdx
];
...
...
@@ -152,15 +166,15 @@ under the License.
y
:
coord
[
1
],
// scaleX: isNewCluster ? 1.2 : 1,
// scaleY: isNewCluster ? 1.2 : 1,
//
$
transition: ['scaleX', 'scaleY'],
// transition: ['scaleX', 'scaleY'],
shape
:
shape
,
style
:
{
fill
:
contentColor
,
stroke
:
'
#333
'
,
lineWidth
:
1
,
shadowColor
:
contentColor
,
shadowBlur
:
isNewCluster
?
7
:
0
,
$
transition
:
'
shadowBlur
'
shadowBlur
:
isNewCluster
?
12
:
0
,
transition
:
'
shadowBlur
'
},
during
:
function
(
apiDuring
)
{
var
currContentColor
=
getColorInTransition
(
apiDuring
,
'
content
'
);
...
...
@@ -177,7 +191,7 @@ under the License.
shape
[
key
+
'
G
'
]
=
colorRGBA
[
1
];
shape
[
key
+
'
B
'
]
=
colorRGBA
[
2
];
shape
[
key
+
'
A
'
]
=
colorRGBA
[
3
];
var
transition
=
shape
.
$transition
||
(
shape
.
$
transition
=
[]);
var
transition
=
shape
.
transition
||
(
shape
.
transition
=
[]);
transition
.
push
(
key
+
'
R
'
,
key
+
'
G
'
,
key
+
'
B
'
,
key
+
'
A
'
);
}
...
...
@@ -191,19 +205,66 @@ under the License.
return
echarts
.
color
.
stringify
(
colorArr
,
'
rgba
'
);
}
function
renderBoundary
(
params
,
api
)
{
var
center
=
api
.
coord
([
api
.
value
(
2
),
api
.
value
(
3
)]);
var
endP
=
api
.
coord
([
api
.
value
(
0
),
api
.
value
(
1
)]);
var
diffX
=
center
[
0
]
-
endP
[
0
];
var
diffY
=
center
[
1
]
-
endP
[
1
];
var
radius
=
Math
.
pow
(
diffX
*
diffX
+
diffY
*
diffY
,
0.5
)
+
10
;
var
newCluIdx
=
api
.
value
(
4
);
return
{
type
:
'
circle
'
,
shape
:
{
cx
:
isNaN
(
center
[
0
])
?
0
:
center
[
0
],
cy
:
isNaN
(
center
[
1
])
?
0
:
center
[
1
],
r
:
isNaN
(
radius
)
?
0
:
radius
,
// transition: 'newCluIdx'
},
style
:
{
fill
:
null
,
stroke
:
'
#bbb
'
,
lineDash
:
[
5
,
5
],
lineWidth
:
3
,
// opacity: 0
},
during
:
function
(
apiDuring
)
{
apiDuring
.
setShape
(
'
cx
'
,
Math
.
random
()
*
10
);
// var cluIdx = apiDuring.setShape('newCluIdx');
// var percent = Math.ceil(cluIdx) - cluIdx;
// var opacity = (Math.ceil(cluIdx) - cluIdx) > 0.5 ?
}
};
}
function
makeStepOption
(
option
,
stepResult
)
{
var
centroids
=
stepResult
.
centroids
;
var
centroids
=
stepResult
.
centroids
||
[]
;
var
points
=
stepResult
.
points
;
var
newMaxAssmIdx
=
stepResult
.
newestClusterMaxAssessmentIndex
;
var
newCluIdx
=
stepResult
.
newestClusterIndex
;
option
.
options
.
push
({
series
:
{
series
:
[
{
type
:
'
custom
'
,
encode
:
{
tooltip
:
[
0
,
1
]
},
renderItem
:
renderItemPoint
,
data
:
points
}
},
{
type
:
'
custom
'
,
renderItem
:
renderBoundary
,
animationDuration
:
3000
,
data
:
[
[
(
points
[
newMaxAssmIdx
]
||
[])[
0
],
(
points
[
newMaxAssmIdx
]
||
[])[
1
],
(
centroids
[
newCluIdx
]
||
[])[
0
],
(
centroids
[
newCluIdx
]
||
[])[
1
],
newCluIdx
]
]
}]
});
}
...
...
@@ -258,6 +319,7 @@ under the License.
title
:
[
'
Cluster algorithm visualization
'
],
height
:
600
,
option
:
option
});
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录