Attempting to transition a tree created with d3 (v3) in vanilla JavaScript into an Angular2 component has been challenging for me. The issue lies in displaying it correctly within the component.
Below is the code snippet from tree.component.ts:
import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';
@Component({
selector: 'app-tree',
templateUrl: './tree.component.html',
styleUrls: ['./tree.component.css']
})
export class TreeComponent {
@ViewChild('tree') private chartContainer: ElementRef;
@Input() private data: Array<any>;
private dataInfo2 = {
// Data information here
}
// Methods and variables implementation here
Here is the accompanying tree.component.css file:
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.found {
fill: #ff4136;
stroke: #ff4136;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
The adjustments made from plain JavaScript to this Angular2 setup involved encapsulating all variables within the TreeComponent class and modifying class methods accordingly. Despite trying to link the original svg to other elements, rendering failed, so the SVG is attached to the body element as shown below.
Current rendering: https://i.stack.imgur.com/cD2Nn.png
Desired output: https://i.stack.imgur.com/JmjFW.png
If anyone can provide insights on why only one node and path are appended, halting the process thereafter, I would greatly appreciate it.