Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
C
chart-project
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
czj
chart-project
Commits
8416b864
提交
8416b864
authored
11月 29, 2023
作者:
祖铭松
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 环状热图
上级
0aeece05
显示空白字符变更
内嵌
并排
正在显示
4 个修改的文件
包含
632 行增加
和
252 行删除
+632
-252
chart.vue
src/components/BeeColonyDiagram/components/chart.vue
+2
-1
config.vue
src/components/BeeColonyDiagram/components/config.vue
+1
-1
index.vue
src/components/Test/index.vue
+189
-250
mock.js
src/components/Test/mock.js
+440
-0
没有找到文件。
src/components/BeeColonyDiagram/components/chart.vue
浏览文件 @
8416b864
...
...
@@ -45,7 +45,6 @@ const generateChart = (data) => {
domain
:
[
0
,
10
]
},
marks
:
[
// Plot.frame(),
Plot
.
ruleX
([
0
]),
Plot
.
ruleY
([
0
]),
Plot
.
axisX
({
...
...
@@ -60,6 +59,8 @@ const generateChart = (data) => {
}),
Plot
.
axisY
({
label
:
!!
ret
.
y_title
?
ret
.
y_title
:
null
,
labelAnchor
:
'center'
,
labelArrow
:
'none'
,
stroke
:
ret
.
y_tickMarks_color
||
'currentColor'
,
tickSize
:
ret
.
show_x_tickMarks
?
ret
.
y_tickMarks_length
:
0
,
fill
:
ret
.
ytitle_font_color
||
'currentColor'
,
...
...
src/components/BeeColonyDiagram/components/config.vue
浏览文件 @
8416b864
...
...
@@ -133,7 +133,7 @@
<input
type=
"checkbox"
v-model=
"dynamic_parameter.ytitle_font_style"
/>
</div>
<div
class=
"form-item"
>
<span>
x
轴标题:
</span>
<span>
Y
轴标题:
</span>
<input
type=
"text"
v-model=
"dynamic_parameter.y_title"
/>
</div>
<h3
class=
"type content"
>
图表配置
</h3>
...
...
src/components/Test/index.vue
浏览文件 @
8416b864
...
...
@@ -5,227 +5,12 @@
<
script
setup
>
import
{
ref
,
onMounted
}
from
'vue'
;
// import * as d3 from 'd3';
import
{
chartData
,
treeData
}
from
'./mock.js'
;
import
*
as
d3
from
'https://cdn.jsdelivr.net/npm/d3@7/+esm'
;
const
chartRef
=
ref
(
null
);
const
data
=
[
{
hour
:
0
,
fruit_trip
:
0.21
,
protein_trip
:
0.08
,
fmcg_trip
:
0.08
,
fastfoods
:
0.09
,
caterings
:
0.12
,
weighted
:
0.1
},
{
hour
:
1
,
fruit_trip
:
0.12
,
protein_trip
:
0.32
,
fmcg_trip
:
0.08
,
fastfoods
:
0.09
,
caterings
:
0.12
,
weighted
:
0.1
},
{
hour
:
2
,
fruit_trip
:
0.11
,
protein_trip
:
0.21
,
fmcg_trip
:
0.02
,
fastfoods
:
0.1
,
caterings
:
0.11
,
weighted
:
0.2
},
{
hour
:
3
,
fruit_trip
:
0.12
,
protein_trip
:
0.32
,
fmcg_trip
:
0.08
,
fastfoods
:
0.09
,
caterings
:
0.12
,
weighted
:
0.1
},
{
hour
:
4
,
fruit_trip
:
0.08
,
protein_trip
:
0.21
,
fmcg_trip
:
0.12
,
fastfoods
:
0.08
,
caterings
:
0.21
,
weighted
:
0.02
},
{
hour
:
5
,
fruit_trip
:
0.12
,
protein_trip
:
0.32
,
fmcg_trip
:
0.08
,
fastfoods
:
0.09
,
caterings
:
0.12
,
weighted
:
0.1
},
{
hour
:
6
,
fruit_trip
:
0.08
,
protein_trip
:
0.21
,
fmcg_trip
:
0.12
,
fastfoods
:
0.08
,
caterings
:
0.21
,
weighted
:
0.02
},
{
hour
:
7
,
fruit_trip
:
0.01
,
protein_trip
:
0.04
,
fmcg_trip
:
0.21
,
fastfoods
:
0.01
,
caterings
:
0.2
,
weighted
:
0.02
},
{
hour
:
8
,
fruit_trip
:
0.08
,
protein_trip
:
0.21
,
fmcg_trip
:
0.12
,
fastfoods
:
0.08
,
caterings
:
0.21
,
weighted
:
0.02
},
{
hour
:
9
,
fruit_trip
:
0.01
,
protein_trip
:
0.12
,
fmcg_trip
:
0.21
,
fastfoods
:
0.01
,
caterings
:
0.09
,
weighted
:
0.01
},
{
hour
:
10
,
fruit_trip
:
0.09
,
protein_trip
:
0.12
,
fmcg_trip
:
0.21
,
fastfoods
:
0.01
,
caterings
:
0.21
,
weighted
:
0.07
},
{
hour
:
11
,
fruit_trip
:
0.113
,
protein_trip
:
0.102
,
fmcg_trip
:
0.067
,
fastfoods
:
0.008
,
caterings
:
0.036
,
weighted
:
0.057
},
{
hour
:
12
,
fruit_trip
:
0.154
,
protein_trip
:
0.15
,
fmcg_trip
:
0.09
,
fastfoods
:
0.057
,
caterings
:
0.153
,
weighted
:
0.108
},
{
hour
:
13
,
fruit_trip
:
0.17
,
protein_trip
:
0.116
,
fmcg_trip
:
0.096
,
fastfoods
:
0.097
,
caterings
:
0.172
,
weighted
:
0.121
},
{
hour
:
14
,
fruit_trip
:
0.119
,
protein_trip
:
0.095
,
fmcg_trip
:
0.088
,
fastfoods
:
0.092
,
caterings
:
0.162
,
weighted
:
0.107
},
{
hour
:
15
,
fruit_trip
:
0.1
,
protein_trip
:
0.081
,
fmcg_trip
:
0.086
,
fastfoods
:
0.067
,
caterings
:
0.115
,
weighted
:
0.089
},
{
hour
:
16
,
fruit_trip
:
0.093
,
protein_trip
:
0.087
,
fmcg_trip
:
0.076
,
fastfoods
:
0.048
,
caterings
:
0.057
,
weighted
:
0.069
},
{
hour
:
17
,
fruit_trip
:
0.077
,
protein_trip
:
0.087
,
fmcg_trip
:
0.084
,
fastfoods
:
0.038
,
caterings
:
0.032
,
weighted
:
0.064
},
{
hour
:
18
,
fruit_trip
:
0.087
,
protein_trip
:
0.094
,
fmcg_trip
:
0.088
,
fastfoods
:
0.038
,
caterings
:
0.025
,
weighted
:
0.066
},
{
hour
:
19
,
fruit_trip
:
0.058
,
protein_trip
:
0.086
,
fmcg_trip
:
0.085
,
fastfoods
:
0.086
,
caterings
:
0.049
,
weighted
:
0.075
},
{
hour
:
20
,
fruit_trip
:
0.026
,
protein_trip
:
0.078
,
fmcg_trip
:
0.092
,
fastfoods
:
0.157
,
caterings
:
0.064
,
weighted
:
0.091
},
{
hour
:
21
,
fruit_trip
:
0
,
protein_trip
:
0.02
,
fmcg_trip
:
0.085
,
fastfoods
:
0.169
,
caterings
:
0.067
,
weighted
:
0.083
},
{
hour
:
22
,
fruit_trip
:
0.003
,
protein_trip
:
0.003
,
fmcg_trip
:
0.05
,
fastfoods
:
0.11
,
caterings
:
0.054
,
weighted
:
0.053
},
{
hour
:
23
,
fruit_trip
:
0
,
protein_trip
:
0.001
,
fmcg_trip
:
0.015
,
fastfoods
:
0.035
,
caterings
:
0.015
,
weighted
:
0.016
}
];
const
data
=
chartData
.
map
((
data
,
index
)
=>
({
index
:
index
+
1
,
...
data
}));
// console.log(data);
// 生成图表
const
generateChart
=
()
=>
{
...
...
@@ -236,7 +21,8 @@ const generateChart = () => {
return
d3
.
scaleQuantize
()
.
domain
([
0
,
max
])
.
range
(
d3
.
merge
([[
d3
.
color
(
'steelblue'
)],
d3
.
quantize
((
t
)
=>
d3
.
interpolateRainbow
(
t
),
range_count
-
1
).
reverse
()]));
.
range
([
'#397899'
,
'#60B8E6'
,
'#5C8EE6'
,
'#476EB3'
,
'#E84A43'
,
'#EF8681'
,
'#F7BEBB'
,
'#579967'
,
'#77E691'
,
'#F08230'
]);
// .range(d3.merge([[d3.color('steelblue')], d3.quantize((t) => d3.interpolateRainbow(t), range_count - 1).reverse()]))
};
const
arc
=
(
index
,
total
)
=>
{
...
...
@@ -272,15 +58,16 @@ const generateChart = () => {
const
pie
=
d3
.
pie
().
sort
(
null
).
value
(
1
);
let
categories
=
Object
.
keys
(
data
[
0
]).
splice
(
1
);
let
cleaned
=
categories
.
map
((
c
)
=>
{
return
{
name
:
c
,
data
:
pie
(
data
.
filter
((
d
)
=>
!!
d
.
hour
)
.
filter
((
d
)
=>
!!
d
.
index
)
.
map
((
d
)
=>
{
return
{
hour
:
d
.
hour
,
index
:
d
.
index
,
value
:
d
[
c
]
};
})
...
...
@@ -294,11 +81,15 @@ const generateChart = () => {
.
attr
(
'height'
,
height
)
.
attr
(
'viewBox'
,
[
-
width
/
2
,
-
height
/
2
,
width
,
height
]);
let
dataMaxNumber
=
null
;
const
dataMaxArr
=
[];
for
(
var
i
=
0
;
i
<
cleaned
.
length
;
i
++
)
{
let
set
=
new
Set
(
cleaned
[
i
].
data
.
map
((
f
)
=>
f
.
data
.
value
));
let
distinct_values
=
set
.
size
;
let
fcolors
=
color
(
d3
.
max
(
cleaned
[
i
].
data
.
map
((
f
)
=>
f
.
data
.
value
)),
distinct_values
);
let
maxNumber
=
d3
.
max
(
cleaned
[
i
].
data
.
map
((
f
)
=>
f
.
data
.
value
));
let
fcolors
=
color
(
maxNumber
,
distinct_values
);
dataMaxArr
.
push
(
maxNumber
);
svg
.
append
(
'g'
)
.
attr
(
'stroke'
,
'none'
)
...
...
@@ -313,14 +104,7 @@ const generateChart = () => {
.
attr
(
'fill'
,
(
d
)
=>
fcolors
(
d
.
data
.
value
))
// .attr('d', i == cleaned.length - 1 ? arcTotal(i, cleaned.length) : arc(i, cleaned.length));
.
attr
(
'd'
,
arcCustom
(
i
,
cleaned
.
length
))
.
attr
(
'transform'
,
'rotate(70)'
);
}
for
(
var
i
=
0
;
i
<
cleaned
.
length
;
i
++
)
{
let
set
=
new
Set
(
cleaned
[
i
].
data
.
map
((
f
)
=>
f
.
data
.
value
));
let
distinct_values
=
set
.
size
;
let
fcolors
=
color
(
d3
.
max
(
cleaned
[
i
].
data
.
map
((
f
)
=>
f
.
data
.
value
)),
distinct_values
);
.
attr
(
'transform'
,
'rotate(90)'
);
svg
.
append
(
'g'
)
.
attr
(
'stroke'
,
'none'
)
...
...
@@ -328,41 +112,196 @@ const generateChart = () => {
.
attr
(
'stroke-linejoin'
,
'round'
)
.
selectAll
(
'path'
+
i
)
.
data
(
cleaned
[
i
].
data
.
slice
(
6
,
12
))
//
.attr('id', function (d, i) {
//
return 'catArc_' + i;
//
})
.
attr
(
'id'
,
function
(
d
,
i
)
{
return
'catArc_'
+
i
;
})
.
join
(
'path'
)
.
attr
(
'fill'
,
(
d
)
=>
fcolors
(
d
.
data
.
value
))
// .attr('d', i == cleaned.length - 1 ? arcTotal(i, cleaned.length) : arc(i, cleaned.length));
.
attr
(
'd'
,
arcCustom
(
i
,
cleaned
.
length
))
.
attr
(
'transform'
,
'rotate(95)'
);
}
for
(
var
i
=
0
;
i
<
cleaned
.
length
;
i
++
)
{
let
set
=
new
Set
(
cleaned
[
i
].
data
.
map
((
f
)
=>
f
.
data
.
value
));
let
distinct_values
=
set
.
size
;
let
fcolors
=
color
(
d3
.
max
(
cleaned
[
i
].
data
.
map
((
f
)
=>
f
.
data
.
value
)),
distinct_values
);
.
attr
(
'transform'
,
'rotate(130)'
);
svg
.
append
(
'g'
)
.
attr
(
'stroke'
,
'none'
)
.
attr
(
'stroke-width'
,
1
)
.
attr
(
'stroke-linejoin'
,
'round'
)
.
selectAll
(
'path'
+
i
)
.
data
(
cleaned
[
i
].
data
.
slice
(
12
,
18
))
//
.attr('id', function (d, i) {
//
return 'catArc_' + i;
//
})
.
data
(
cleaned
[
i
].
data
.
slice
(
12
,
24
))
.
attr
(
'id'
,
function
(
d
,
i
)
{
return
'catArc_'
+
i
;
})
.
join
(
'path'
)
.
attr
(
'fill'
,
(
d
)
=>
fcolors
(
d
.
data
.
value
))
// .attr('d', i == cleaned.length - 1 ? arcTotal(i, cleaned.length) : arc(i, cleaned.length));
.
attr
(
'd'
,
arcCustom
(
i
,
cleaned
.
length
))
.
attr
(
'transform'
,
'rotate(1
2
5)'
);
.
attr
(
'transform'
,
'rotate(1
5
5)'
);
}
dataMaxNumber
=
Math
.
round
(
Math
.
max
.
apply
(
null
,
dataMaxArr
));
svg
.
append
(
'text'
).
attr
(
'x'
,
200
).
attr
(
'y'
,
120
).
style
(
'text-anchor'
,
'middle'
).
style
(
'font'
,
'14px sans-serif'
).
text
(
'A'
);
svg
.
append
(
'text'
).
attr
(
'x'
,
-
200
).
attr
(
'y'
,
120
).
style
(
'text-anchor'
,
'middle'
).
style
(
'font'
,
'14px sans-serif'
).
text
(
'B'
);
svg
.
append
(
'text'
).
attr
(
'x'
,
0
).
attr
(
'y'
,
-
230
).
style
(
'text-anchor'
,
'middle'
).
style
(
'font'
,
'14px sans-serif'
).
text
(
'C'
);
svg
.
append
(
'g'
)
.
selectAll
()
.
data
(
categories
)
.
join
(
'g'
)
.
attr
(
'transform'
,
(
d
,
i
,
nodes
)
=>
`rotate(65) translate(-10,
${(
nodes
.
length
/
2
-
i
-
1
)
*
15
}
)`
)
.
call
((
g
)
=>
g
.
append
(
'text'
)
.
attr
(
'x'
,
15
)
.
attr
(
'y'
,
-
155
)
.
attr
(
'dy'
,
'0.35em'
)
.
style
(
'font'
,
'10px sans-serif'
)
.
text
((
d
)
=>
d
)
);
// legend
svg
.
append
(
'g'
)
.
selectAll
()
.
data
([
'0'
,
'1'
,
'2'
,
'3'
,
'4'
,
'5'
])
.
join
(
'g'
)
.
attr
(
'transform'
,
(
d
,
i
,
nodes
)
=>
`translate(-10,
${(
nodes
.
length
/
2
-
i
-
1
)
*
20
}
)`
)
.
call
((
g
)
=>
g
.
append
(
'rect'
).
attr
(
'width'
,
18
).
attr
(
'height'
,
18
).
attr
(
'fill'
,
color
(
dataMaxNumber
)))
.
call
((
g
)
=>
g
.
append
(
'text'
)
.
attr
(
'x'
,
24
)
.
attr
(
'y'
,
9
)
.
attr
(
'dy'
,
'0.35em'
)
.
text
((
d
)
=>
d
)
);
// tree
generateTree
(
svg
);
// Append the SVG element.
chartRef
.
value
.
append
(
svg
.
node
());
};
const
generateTree
=
(
svg
)
=>
{
const
outerRadius
=
277
;
const
innerRadius
=
outerRadius
-
162
;
const
linkStep
=
(
startAngle
,
startRadius
,
endAngle
,
endRadius
)
=>
{
const
c0
=
Math
.
cos
((
startAngle
=
((
startAngle
-
90
)
/
180
)
*
Math
.
PI
));
const
s0
=
Math
.
sin
(
startAngle
);
const
c1
=
Math
.
cos
((
endAngle
=
((
endAngle
-
90
)
/
180
)
*
Math
.
PI
));
const
s1
=
Math
.
sin
(
endAngle
);
return
(
'M'
+
startRadius
*
c0
+
','
+
startRadius
*
s0
+
(
endAngle
===
startAngle
?
''
:
'A'
+
startRadius
+
','
+
startRadius
+
' 0 0 '
+
(
endAngle
>
startAngle
?
1
:
0
)
+
' '
+
startRadius
*
c1
+
','
+
startRadius
*
s1
)
+
'L'
+
endRadius
*
c1
+
','
+
endRadius
*
s1
);
};
// const linkConstant = (d) => {
// return linkStep(d.source.x, d.source.y, d.target.x, d.target.y);
// };
const
linkVariable
=
(
d
)
=>
{
return
linkStep
(
d
.
source
.
x
,
d
.
source
.
radius
,
d
.
target
.
x
,
d
.
target
.
radius
);
};
const
maxLength
=
(
d
)
=>
d
.
data
.
length
+
(
d
.
children
?
d3
.
max
(
d
.
children
,
maxLength
)
:
0
);
const
setRadius
=
(
d
,
y0
,
k
)
=>
{
d
.
radius
=
(
y0
+=
d
.
data
.
length
)
*
k
;
if
(
d
.
children
)
{
d
.
children
.
forEach
((
d
)
=>
setRadius
(
d
,
y0
,
k
));
}
};
// tree-A
const
clusterA
=
d3
.
cluster
()
.
size
([
67
,
innerRadius
])
.
separation
((
a
,
b
)
=>
1
);
const
rootA
=
d3
.
hierarchy
(
treeData
.
treeA
,
(
d
)
=>
d
.
branchset
)
.
sum
((
d
)
=>
(
d
.
branchset
?
0
:
1
))
.
sort
((
a
,
b
)
=>
a
.
value
-
b
.
value
||
d3
.
ascending
(
a
.
data
.
length
,
b
.
data
.
length
));
clusterA
(
rootA
);
setRadius
(
rootA
,
(
rootA
.
data
.
length
=
0
),
innerRadius
/
maxLength
(
rootA
));
const
linkA
=
svg
.
append
(
'g'
)
.
attr
(
'class'
,
'tree'
)
.
attr
(
'fill'
,
'none'
)
.
attr
(
'stroke'
,
'#FF5252'
)
.
selectAll
(
'path'
)
.
data
(
rootA
.
links
().
slice
(
1
))
.
join
(
'path'
)
.
each
(
function
(
d
)
{
d
.
target
.
linkNode
=
this
;
})
.
attr
(
'd'
,
linkVariable
)
.
attr
(
'stroke'
,
(
d
)
=>
d
.
target
.
color
)
.
attr
(
'transform'
,
'rotate(90)'
);
// tree-B
const
clusterB
=
d3
.
cluster
()
.
size
([
67
,
innerRadius
])
.
separation
((
a
,
b
)
=>
1
);
const
rootB
=
d3
.
hierarchy
(
treeData
.
treeB
,
(
d
)
=>
d
.
branchset
)
.
sum
((
d
)
=>
(
d
.
branchset
?
0
:
1
))
.
sort
((
a
,
b
)
=>
a
.
value
-
b
.
value
||
d3
.
ascending
(
a
.
data
.
length
,
b
.
data
.
length
));
clusterB
(
rootB
);
setRadius
(
rootB
,
(
rootB
.
data
.
length
=
0
),
innerRadius
/
maxLength
(
rootB
));
const
linkB
=
svg
.
append
(
'g'
)
.
attr
(
'class'
,
'tree'
)
.
attr
(
'fill'
,
'none'
)
.
attr
(
'stroke'
,
'#FF5252'
)
.
selectAll
(
'path'
)
.
data
(
rootB
.
links
().
slice
(
1
))
.
join
(
'path'
)
.
each
(
function
(
d
)
{
d
.
target
.
linkNode
=
this
;
})
.
attr
(
'd'
,
linkVariable
)
.
attr
(
'stroke'
,
(
d
)
=>
d
.
target
.
color
)
.
attr
(
'transform'
,
'rotate(197)'
);
// tree-C
const
clusterC
=
d3
.
cluster
()
.
size
([
140
,
innerRadius
])
.
separation
((
a
,
b
)
=>
1
);
const
rootC
=
d3
.
hierarchy
(
treeData
.
treeC
,
(
d
)
=>
d
.
branchset
)
.
sum
((
d
)
=>
(
d
.
branchset
?
0
:
1
))
.
sort
((
a
,
b
)
=>
a
.
value
-
b
.
value
||
d3
.
ascending
(
a
.
data
.
length
,
b
.
data
.
length
));
clusterC
(
rootC
);
setRadius
(
rootC
,
(
rootC
.
data
.
length
=
0
),
innerRadius
/
maxLength
(
rootC
));
const
linkC
=
svg
.
append
(
'g'
)
.
attr
(
'class'
,
'tree'
)
.
attr
(
'fill'
,
'none'
)
.
attr
(
'stroke'
,
'#FF5252'
)
.
selectAll
(
'path'
)
.
data
(
rootC
.
links
().
slice
(
1
))
.
join
(
'path'
)
.
each
(
function
(
d
)
{
d
.
target
.
linkNode
=
this
;
})
.
attr
(
'd'
,
linkVariable
)
.
attr
(
'stroke'
,
(
d
)
=>
d
.
target
.
color
)
.
attr
(
'transform'
,
'rotate(-72)'
);
return
svg
.
node
();
};
onMounted
(()
=>
{
generateChart
();
});
...
...
src/components/Test/mock.js
0 → 100644
浏览文件 @
8416b864
export
const
chartData
=
[
{
"sample1"
:
4.4868
,
"sample2"
:
2.1028
,
"sample3"
:
4.6156
,
"sample4"
:
3.6062
,
"sample5"
:
2.9296
,
"sample6"
:
3.9476
},
{
"sample1"
:
3.9594
,
"sample2"
:
3.3652
,
"sample3"
:
0.4511
,
"sample4"
:
1.3835
,
"sample5"
:
1.1056
,
"sample6"
:
1.5203
},
{
"sample1"
:
3.2306
,
"sample2"
:
3.3767
,
"sample3"
:
0.2988
,
"sample4"
:
2.9117
,
"sample5"
:
3.9578
,
"sample6"
:
3.4969
},
{
"sample1"
:
0.3022
,
"sample2"
:
4.9327
,
"sample3"
:
2.9004
,
"sample4"
:
2.3704
,
"sample5"
:
3.1998
,
"sample6"
:
3.587
},
{
"sample1"
:
2.4354
,
"sample2"
:
3.4559
,
"sample3"
:
0.1632
,
"sample4"
:
4.4134
,
"sample5"
:
4.4571
,
"sample6"
:
2.6568
},
{
"sample1"
:
4.598
,
"sample2"
:
0.0048
,
"sample3"
:
3.8677
,
"sample4"
:
1.8868
,
"sample5"
:
2.9284
,
"sample6"
:
3.1901
},
{
"sample1"
:
4.8462
,
"sample2"
:
1.5543
,
"sample3"
:
2.3545
,
"sample4"
:
3.8867
,
"sample5"
:
4.5715
,
"sample6"
:
0.4517
},
{
"sample1"
:
4.8664
,
"sample2"
:
1.2789
,
"sample3"
:
1.5975
,
"sample4"
:
3.6036
,
"sample5"
:
1.5056
,
"sample6"
:
2.5582
},
{
"sample1"
:
0.5232
,
"sample2"
:
0.6443
,
"sample3"
:
0.2087
,
"sample4"
:
2.719
,
"sample5"
:
1.0114
,
"sample6"
:
3.4342
},
{
"sample1"
:
2.0966
,
"sample2"
:
0.33
,
"sample3"
:
1.9473
,
"sample4"
:
0.2564
,
"sample5"
:
3.9563
,
"sample6"
:
0.2188
},
{
"sample1"
:
3.7602
,
"sample2"
:
4.9877
,
"sample3"
:
0.838
,
"sample4"
:
1.9343
,
"sample5"
:
4.756
,
"sample6"
:
4.1277
},
{
"sample1"
:
0.3151
,
"sample2"
:
1.769
,
"sample3"
:
1.9379
,
"sample4"
:
2.8278
,
"sample5"
:
0.7412
,
"sample6"
:
1.198
},
{
"sample1"
:
1.6036
,
"sample2"
:
1.0314
,
"sample3"
:
2.4763
,
"sample4"
:
1.8036
,
"sample5"
:
3.8841
,
"sample6"
:
1.8738
},
{
"sample1"
:
1.2388
,
"sample2"
:
0.3259
,
"sample3"
:
0.7626
,
"sample4"
:
2.1545
,
"sample5"
:
1.5361
,
"sample6"
:
4.7494
},
{
"sample1"
:
2.6602
,
"sample2"
:
2.5592
,
"sample3"
:
0.9081
,
"sample4"
:
0.4913
,
"sample5"
:
0.2115
,
"sample6"
:
4.7097
},
{
"sample1"
:
0.7287
,
"sample2"
:
3.9198
,
"sample3"
:
4.6308
,
"sample4"
:
3.1059
,
"sample5"
:
4.1345
,
"sample6"
:
1.4114
},
{
"sample1"
:
2.1624
,
"sample2"
:
0.8496
,
"sample3"
:
4.4815
,
"sample4"
:
4.3133
,
"sample5"
:
4.1448
,
"sample6"
:
4.989
},
{
"sample1"
:
2.9437
,
"sample2"
:
1.1908
,
"sample3"
:
3.197
,
"sample4"
:
2.2078
,
"sample5"
:
4.52
,
"sample6"
:
4.211
},
{
"sample1"
:
4.4411
,
"sample2"
:
1.2893
,
"sample3"
:
3.4074
,
"sample4"
:
3.2694
,
"sample5"
:
2.2056
,
"sample6"
:
3.853
},
{
"sample1"
:
4.4721
,
"sample2"
:
4.1316
,
"sample3"
:
2.429
,
"sample4"
:
3.0316
,
"sample5"
:
0.1618
,
"sample6"
:
1.8447
},
{
"sample1"
:
2.8048
,
"sample2"
:
1.8868
,
"sample3"
:
4.2447
,
"sample4"
:
3.3645
,
"sample5"
:
0.8583
,
"sample6"
:
4.1797
},
{
"sample1"
:
0.6126
,
"sample2"
:
4.6458
,
"sample3"
:
4.2906
,
"sample4"
:
4.4723
,
"sample5"
:
3.8047
,
"sample6"
:
2.2496
},
{
"sample1"
:
1.9088
,
"sample2"
:
4.737
,
"sample3"
:
1.8683
,
"sample4"
:
4.7179
,
"sample5"
:
2.0124
,
"sample6"
:
4.2413
},
{
"sample1"
:
3.5843
,
"sample2"
:
2.5398
,
"sample3"
:
0.8788
,
"sample4"
:
4.76
,
"sample5"
:
3.9924
,
"sample6"
:
0.0181
},
{
"sample1"
:
null
,
"sample2"
:
null
,
"sample3"
:
null
,
"sample4"
:
null
,
"sample5"
:
null
,
"sample6"
:
null
},
{
"sample1"
:
null
,
"sample2"
:
null
,
"sample3"
:
null
,
"sample4"
:
null
,
"sample5"
:
null
,
"sample6"
:
null
},
{
"sample1"
:
null
,
"sample2"
:
null
,
"sample3"
:
null
,
"sample4"
:
null
,
"sample5"
:
null
,
"sample6"
:
null
},
{
"sample1"
:
null
,
"sample2"
:
null
,
"sample3"
:
null
,
"sample4"
:
null
,
"sample5"
:
null
,
"sample6"
:
null
},
{
"sample1"
:
null
,
"sample2"
:
null
,
"sample3"
:
null
,
"sample4"
:
null
,
"sample5"
:
null
,
"sample6"
:
null
},
{
"sample1"
:
null
,
"sample2"
:
null
,
"sample3"
:
null
,
"sample4"
:
null
,
"sample5"
:
null
,
"sample6"
:
null
},
{
"sample1"
:
null
,
"sample2"
:
null
,
"sample3"
:
null
,
"sample4"
:
null
,
"sample5"
:
null
,
"sample6"
:
null
},
{
"sample1"
:
null
,
"sample2"
:
null
,
"sample3"
:
null
,
"sample4"
:
null
,
"sample5"
:
null
,
"sample6"
:
null
},
]
export
const
treeData
=
{
treeA
:
{
"branchset"
:
[
{
"name"
:
"n_85"
,
"branchset"
:
[
{
"name"
:
"Diffuser_3"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
2.5
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
2.5
}
],
"length"
:
1
}
],
"length"
:
0.5
},
{
"name"
:
"Diffuser_1"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
1
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
1
}
],
"length"
:
1
}
],
"length"
:
0.5
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
1
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
1
}
],
"length"
:
1
}
],
"length"
:
0.5
}
],
"length"
:
1
}
],
"length"
:
0.5
},
],
"length"
:
30
},
],
},
treeB
:
{
"branchset"
:
[
{
"name"
:
"n_85"
,
"branchset"
:
[
{
"name"
:
"Diffuser_1"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
1
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
1
}
],
"length"
:
1
}
],
"length"
:
0.5
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
1
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
1
}
],
"length"
:
1
}
],
"length"
:
0.5
}
],
"length"
:
1
}
],
"length"
:
0.5
},
{
"name"
:
"Diffuser_3"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
2.5
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
2.5
}
],
"length"
:
1
}
],
"length"
:
0.5
},
],
"length"
:
30
},
],
},
treeC
:
{
"branchset"
:
[
{
"name"
:
"n_23"
,
"branchset"
:
[
{
"name"
:
"n_85"
,
"branchset"
:
[
{
"name"
:
"Diffuser_3"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
2.5
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
2.5
}
],
"length"
:
1
}
],
"length"
:
0.5
},
{
"name"
:
"Diffuser_1"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
1
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
1
}
],
"length"
:
1
}
],
"length"
:
0.5
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
1
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
1
}
],
"length"
:
1
}
],
"length"
:
0.5
}
],
"length"
:
1
}
],
"length"
:
0.5
},
],
"length"
:
0.8
},
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_3"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
2.5
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
2.5
}
],
"length"
:
1
}
],
"length"
:
0.5
},
{
"name"
:
"Diffuser_1"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
1
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
1
}
],
"length"
:
1
}
],
"length"
:
0.5
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
{
"name"
:
"n_88"
,
"branchset"
:
[
{
"name"
:
"Diffuser_0"
,
"branchset"
:
[
],
"length"
:
1
},
{
"name"
:
"Diffuser_2"
,
"branchset"
:
[
],
"length"
:
1
}
],
"length"
:
1
}
],
"length"
:
0.5
}
],
"length"
:
1
}
],
"length"
:
0.5
},
],
"length"
:
0.8
}
],
"length"
:
30
}
]
}
}
\ No newline at end of file
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论