Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
B
bioviz-js
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
2
Issues
2
List
Boards
Labels
Service Desk
Milestones
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Remi PLANEL
bioviz-js
Commits
53061245
Commit
53061245
authored
Jun 11, 2019
by
Remi PLANEL
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add phylotree component
parent
bc587acc
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
174 additions
and
0 deletions
+174
-0
src/scripts/component/tree/links/rightAngle.ts
src/scripts/component/tree/links/rightAngle.ts
+46
-0
src/scripts/component/tree/node/generic.ts
src/scripts/component/tree/node/generic.ts
+71
-0
src/scripts/component/tree/phylotree.ts
src/scripts/component/tree/phylotree.ts
+57
-0
No files found.
src/scripts/component/tree/links/rightAngle.ts
0 → 100644
View file @
53061245
import
{
select
,
Selection
}
from
"
d3-selection
"
;
import
{
HierarchyPointLink
}
from
"
d3-hierarchy
"
;
import
{
PhyloTreeNode
}
from
"
../../../types
"
;
export
default
function
()
{
function
rightAngle
(
_selection
:
Selection
<
SVGGElement
,
HierarchyPointLink
<
PhyloTreeNode
>
[],
any
,
any
>
)
{
const
classes
=
{
link
:
"
link
"
};
_selection
.
each
(
function
(
_data
)
{
const
links
=
select
(
this
)
.
selectAll
<
SVGPathElement
,
HierarchyPointLink
<
PhyloTreeNode
>>
(
"
.
"
+
classes
.
link
)
.
data
(
_data
);
// ENTER
const
linksE
=
links
.
enter
()
.
append
<
SVGPathElement
>
(
"
path
"
)
.
classed
(
classes
.
link
,
true
);
// EXIT
links
.
exit
().
remove
()
// UPDATE
const
linksU
=
links
.
merge
(
linksE
);
linksU
.
attr
(
"
d
"
,
({
source
,
target
})
=>
{
return
"
M
"
+
target
.
y
+
"
"
+
target
.
x
+
"
H
"
+
source
.
y
+
"
V
"
+
source
.
x
;
})
.
attr
(
"
fill
"
,
"
none
"
)
.
attr
(
"
stroke-width
"
,
2
)
.
attr
(
"
stroke
"
,
"
black
"
);
});
}
return
rightAngle
;
}
src/scripts/component/tree/node/generic.ts
0 → 100644
View file @
53061245
import
{
select
,
Selection
}
from
"
d3-selection
"
;
import
{
HierarchyPointNode
}
from
"
d3-hierarchy
"
;
import
{
PhyloTreeNode
}
from
"
../../../types
"
;
export
default
function
()
{
function
genericNode
(
_selection
:
Selection
<
SVGGElement
,
HierarchyPointNode
<
PhyloTreeNode
>
[],
any
,
any
>
)
{
const
defaultR
=
4
;
const
defaultFill
=
"
#000
"
;
const
classes
=
{
node
:
"
generic-node
"
,
label
:
"
label
"
}
_selection
.
each
(
function
(
_data
)
{
const
node
=
select
(
this
)
.
selectAll
<
SVGGElement
,
HierarchyPointNode
<
PhyloTreeNode
>>
(
"
g.
"
+
classes
.
node
)
.
data
(
_data
);
const
nodeE
=
node
.
enter
()
.
append
(
"
g
"
)
.
classed
(
classes
.
node
,
true
)
// circle
nodeE
.
append
<
SVGCircleElement
>
(
"
circle
"
)
.
attr
(
"
r
"
,
({
data
:
{
nodes
}
})
=>
(
nodes
&&
nodes
.
r
)
?
nodes
.
r
:
defaultR
)
.
attr
(
"
fill
"
,
({
data
:
{
nodes
}
})
=>
(
nodes
&&
nodes
.
fill
)
?
nodes
.
fill
:
defaultFill
)
.
attr
(
"
stroke-width
"
,
({
data
:
{
nodes
}
})
=>
(
nodes
&&
nodes
.
strokeWidth
)
?
nodes
.
strokeWidth
:
10
)
// text
nodeE
.
append
<
SVGTextElement
>
(
"
text
"
)
.
classed
(
classes
.
label
,
true
)
.
attr
(
"
x
"
,
({
data
:
{
nodes
}
})
=>
(
nodes
&&
nodes
.
r
)
?
(
nodes
.
r
)
+
2
:
defaultR
+
2
);
const
nodeU
=
node
.
merge
(
nodeE
)
.
attr
(
"
transform
"
,
d
=>
`translate(
${
d
.
y
}
,
${
d
.
x
}
)`
)
.
attr
(
"
fill-opacity
"
,
1
)
.
attr
(
"
stroke-opacity
"
,
1
);
nodeU
.
select
(
"
.
"
+
classes
.
label
)
.
text
(
d
=>
d
.
data
.
name
)
// Create a white background for text
// to make it better if text appear on
// tree elements
.
clone
(
true
)
.
lower
()
.
attr
(
"
stroke-linejoin
"
,
"
round
"
)
.
attr
(
"
stroke-width
"
,
3
)
.
attr
(
"
stroke
"
,
"
white
"
);
const
nodeExit
=
node
.
exit
()
.
remove
();
});
}
return
genericNode
}
\ No newline at end of file
src/scripts/component/tree/phylotree.ts
0 → 100644
View file @
53061245
import
{
PhyloTreeNode
}
from
"
../../types
"
;
import
{
select
,
Selection
}
from
"
d3-selection
"
;
import
{
HierarchyPointNode
}
from
"
d3-hierarchy
"
;
import
Node
from
"
./node/generic
"
;
import
Link
from
"
./links/rightAngle
"
;
export
default
function
()
{
const
nodeComponent
=
Node
();
const
linkComponent
=
Link
();
function
phylogram
(
_selection
:
Selection
<
SVGGElement
,
HierarchyPointNode
<
PhyloTreeNode
>
[],
any
,
any
>
)
{
const
classes
=
{
root
:
"
phylogram
"
,
nodes
:
"
nodes
"
,
links
:
"
links
"
};
_selection
.
each
(
function
(
_data
)
{
const
phylogram
=
select
(
this
)
.
selectAll
<
SVGGElement
,
HierarchyPointNode
<
PhyloTreeNode
>>
(
"
g
"
+
classes
.
root
)
.
data
(
_data
);
// ENTER
const
phylogramE
=
phylogram
.
enter
()
.
append
(
"
g
"
)
.
classed
(
classes
.
root
,
true
);
phylogramE
.
append
(
"
g
"
).
classed
(
classes
.
links
,
true
)
phylogramE
.
append
(
"
g
"
).
classed
(
classes
.
nodes
,
true
)
// UPDATE
const
phylogramU
=
phylogram
.
merge
(
phylogramE
);
// Nodes
phylogramU
.
select
<
SVGGElement
>
(
'
.
'
+
classes
.
nodes
)
.
datum
(
d
=>
d
.
descendants
().
reverse
())
.
call
(
nodeComponent
);
// Links
phylogramU
.
select
<
SVGGElement
>
(
"
.
"
+
classes
.
links
)
.
datum
(
d
=>
{
console
.
log
(
d
.
links
());
return
d
.
links
()
})
.
call
(
linkComponent
);
})
}
return
phylogram
;
}
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment