ing

src/app/pages/home/home-page.component.html

@@ -22,9 +22,21 @@
       </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> -->
+          <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_maria.svg"></image>
+            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-          <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.id}}</text>
+              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>

src/app/pages/home/home-page.component.ts

@@ -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();
+      })
       ;
   }
 

src/assets/image/icon/icon_background.svg

@@ -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>

src/assets/image/icon/icon_db.svg

@@ -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>

src/assets/image/icon/icon_maria.svg

@@ -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>