ing
|
@ -22,12 +22,24 @@
|
|||
</g>
|
||||
<g *ngFor="let node of nodes">
|
||||
<g class="node-container" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'" (click)="onTargetClick(node)">
|
||||
<!-- <circle class="node" cx="0" cy="0" [attr.r]="node.r" fill="url(#icon_db_maria)"></circle> -->
|
||||
<image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2" xlink:href="../../assets/image/icon/icon_db_maria.svg"></image>
|
||||
<g>
|
||||
<image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
|
||||
xlink:href="../../assets/image/icon/icon_background.svg"></image>
|
||||
</g>
|
||||
<g>
|
||||
<image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
|
||||
xlink:href="../../assets/image/icon/icon_db.svg"></image>
|
||||
</g>
|
||||
<g>
|
||||
<image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
|
||||
xlink:href="../../assets/image/icon/icon_maria.svg"></image>
|
||||
</g>
|
||||
<g>
|
||||
<text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.id}}</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -165,6 +165,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
svg.call(_zoom);
|
||||
|
||||
const __this = this;
|
||||
this.simulation = d3
|
||||
.forceSimulation<Node, Link>()
|
||||
.nodes(this.nodes)
|
||||
|
@ -174,6 +175,9 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
.force('collision', d3.forceCollide().radius(function (node: Node) {
|
||||
return node.r * 1.4;
|
||||
}))
|
||||
.on('tick', () => {
|
||||
__this.changeDetector.markForCheck();
|
||||
})
|
||||
;
|
||||
}
|
||||
|
||||
|
|
11
src/assets/image/icon/icon_background.svg
Normal file
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 66 56" style="enable-background:new 0 0 66 56;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E3E3E2;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M44.9,52.5H21.1l-11.9-9l11.9-9h23.8l11.9,9L44.9,52.5z M66,43.5L49.5,30.9h-33L0,43.5L16.5,56h33L66,43.5z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 555 B |
17
src/assets/image/icon/icon_db.svg
Normal file
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 66 56" style="enable-background:new 0 0 66 56;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#A3BAA6;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M33,46.3c-9,0-15.8-3-15.8-6.9V10.7c0-4,6.8-6.9,15.8-6.9s15.8,3,15.8,6.9v28.7C48.8,43.3,42,46.3,33,46.3z
|
||||
M33.3,8.4c-6.4,0-9.7,1.6-9.8,2.2c0.1,0.6,3.4,2.1,9.8,2.1s9.7-1.6,9.8-2.2C43,10,39.7,8.4,33.3,8.4z"/>
|
||||
<path class="st1" d="M33,4.7c8.2,0,14.8,2.7,14.8,5.9v28.7c0,3.3-6.6,5.9-14.8,5.9s-14.8-2.7-14.8-5.9V10.7
|
||||
C18.2,7.4,24.8,4.7,33,4.7 M33.3,13.7c6,0,10.8-1.4,10.8-3.1s-4.8-3.1-10.8-3.1s-10.8,1.4-10.8,3.1S27.3,13.7,33.3,13.7 M33,2.7
|
||||
c-8.3,0-16.8,2.7-16.8,7.9v28.7c0,5.2,8.4,7.9,16.8,7.9s16.8-2.7,16.8-7.9V10.7C49.8,5.5,41.3,2.7,33,2.7L33,2.7z M25.3,10.6
|
||||
c1.4-0.5,4.2-1.1,8-1.1s6.6,0.6,8,1.1c-1.4,0.5-4.2,1.1-8,1.1S26.7,11.1,25.3,10.6L25.3,10.6z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
27
src/assets/image/icon/icon_maria.svg
Normal file
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 66 56" style="enable-background:new 0 0 66 56;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#002B64;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M45.7,18.8c-0.4,0-0.3,0.1-1.2,0.4c-0.9,0.2-2.1,0.2-3.1,0.6c-3.1,1.3-3.7,5.7-6.4,7.2c-2.1,1.2-4.2,1.3-6,1.9
|
||||
c-1.2,0.4-2.6,1.2-3.7,2.1c-0.9,0.7-0.9,1.4-1.8,2.3c-1,1-3.9,0-5.2,1.6c0.4,0.4,0.6,0.5,1.4,0.4c-0.2,0.3-1.2,0.6-1,1.1
|
||||
s2.7,0.8,4.9-0.5c1-0.6,1.9-1.5,3.5-1.7c2.1-0.3,4.5,0.2,6.9,0.5c-0.4,1.1-1.1,1.8-1.7,2.6c-0.2,0.2,0.4,0.2,1,0.1
|
||||
c1.1-0.3,1.9-0.5,2.7-1c1-0.6,1.2-2.1,2.4-2.5c0.7,1.1,2.6,1.3,3.8,0.5c-1-0.3-1.3-2.5-1-3.5c0.3-0.9,0.7-2.4,1-3.6
|
||||
c0.4-1.3,0.5-3,0.9-3.6c0.7-1,1.4-1.3,2-1.9s1.2-1.1,1.2-2.4C46.3,19,46.1,18.8,45.7,18.8L45.7,18.8z"/>
|
||||
<path class="st1" d="M19.1,36.3c1.6,0.2,2.6,0,3.8-0.6c1.1-0.5,2.1-1.4,3.4-1.9c1.9-0.6,3.9,0,6,0.1c0.5,0,1,0,1.5,0
|
||||
c0.7-0.5,0.7-2.2,1.5-2.3c0,2.4-1,3.9-2,5.3c2.2-0.4,3.5-1.6,4.4-3.3c0.3-0.5,0.5-1.1,0.7-1.6c0.3,0.2,0.1,1,0.3,1.4
|
||||
c1.5-0.8,2.4-2.8,2.9-4.7c0.7-2.2,0.9-4.5,1.4-5.2c0.4-0.6,1.1-1,1.7-1.5c0.7-0.5,1.3-1,1.4-1.9c-0.7-0.1-0.9-0.2-1-0.6
|
||||
c-0.4,0.2-0.7,0.2-1,0.3c-0.3,0-0.7,0-1.1,0c-3.5,0.4-4,4.3-6.3,6.5c-0.2,0.2-0.3,0.3-0.5,0.5c-0.8,0.6-1.8,1-2.7,1.4
|
||||
c-1.5,0.6-2.8,0.6-4.2,1.1c-1,0.4-2,0.9-2.8,1.4c-0.2,0.1-0.4,0.3-0.6,0.4c-0.5,0.4-0.8,0.8-1.1,1.3c-0.3,0.5-0.6,0.9-1.1,1.4
|
||||
c-0.8,0.7-3.6,0.2-4.6,0.9c-0.1,0.1-0.2,0.2-0.3,0.3c0.5,0.2,0.9,0.1,1.5,0.2C20.2,35.7,18.9,36,19.1,36.3L19.1,36.3z M40.5,32
|
||||
c0,0.7,0.4,2,0.8,2.3c-0.7,0.2-1.8-0.1-2.1-0.6C39.3,33.1,40.1,32.5,40.5,32L40.5,32z"/>
|
||||
<path class="st0" d="M41.5,21.3c0.5,0.4,1.6,0.1,1.4-0.8C42.1,20.4,41.7,20.7,41.5,21.3z M45,20.3c-0.1,0.3-0.4,0.6-0.4,1.4
|
||||
c0,0.1-0.1,0.2-0.1,0C44.6,21,44.7,20.7,45,20.3C45,20.1,45.1,20.2,45,20.3L45,20.3z"/>
|
||||
<path class="st0" d="M44.9,20.2c-0.2,0.3-0.5,0.8-0.6,1.5c0,0.1-0.1,0.2-0.1,0C44.3,21,44.6,20.5,44.9,20.2
|
||||
C44.9,20,45,20.1,44.9,20.2z M44.8,20c-0.2,0.3-0.8,0.8-0.9,1.5c0,0.1-0.1,0.2-0.1,0C43.9,20.9,44.4,20.4,44.8,20
|
||||
C44.8,19.9,44.8,19.9,44.8,20z M44.7,19.9c-0.2,0.2-0.9,1-1.1,1.6c0,0.1-0.2,0.2-0.1,0C43.7,20.9,44.3,20.1,44.7,19.9
|
||||
C44.7,19.7,44.8,19.8,44.7,19.9z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 2.3 KiB |