Организационная карта с использованием D3 в угловой ⇐ Javascript

[Anonymous]

Угловая версия 16; D3 Версия 7.9.0; D3-ORG-диаграмма версия 3.1.1 ... Я создал диаграмму организации. Но я хотел бы предоставить организационную диаграмму функцию увеличения и увеличения увеличения и увеличения.HTML code

SCSS code

#orgchart {

.node .label {
fill: green !important;
}

.node .title {
fill: red !important;
}

.node rect {
fill: lightblue !important;
}

svg {
background-color: rgb(213, 219, 220);
}

::ng-deep.node-button-div {
width: 134% !important;
}

// ::ng-deep svg.svg-chart-container {
// height: 200vh !important;
// }

::ng-deep svg.svg-chart-container {
height: auto !important;
width: auto !important;

}

}

TS code

import {
OnChanges,
Component,
OnInit,
Input,
ViewChild,
ElementRef,
} from '@angular/core';
import * as d3 from 'd3';
import { HierarchyNode } from 'd3';
import { OrgChart, State } from 'd3-org-chart';

@Component({
selector: 'app-org-chart',
templateUrl: './org-chart.component.html',
styleUrls: ['./org-chart.component.scss']
})
export class OrgChartComponent implements OnInit, OnChanges {
@ViewChild("chartContainer") chartContainer: ElementRef | undefined;
@Input() data: any[] | undefined;
chart: any;
datas: any[] = [];
constructor() { }

ngOnInit() {

const res = {
data: [
{
id: 1,
pos_name: 'KITTING PROCESS',
size: '',
parentId: 0,
member: 'Mani.N (027)',
imgname: null,
desig_id: 1,
desig_name: 'Managing Director',
file_path: null,
// status: 'inprogress',
imageUrl:
'http://103.154.184.122:8080/kpi_api_dev ... e/user.png',
},
{
id: 2,
pos_name: 'ASSEMBLY PROCESS',
size: '',
parentId: 0,
// member: 'Soumen Deb (142)',
imgname: null,
desig_id: 2,
// desig_name: 'Test27_desig',
file_path: null,
// status: 'pending',
imageUrl:
'http://103.154.184.122:8080/kpi_api_dev ... e/user.png',
},
{
id: 3,
pos_name: 'TESTING PROCESS',
size: '',
parentId: 0,
// member: 'Tanmoy Ghosh (341)',
imgname: null,
desig_id: 3,
// desig_name: 'Manager-Laser Customer Relations',
file_path: null,
// status: 'completed',
imageUrl:
'http://103.154.184.122:8080/kpi_api_dev ... e/user.png',
},
{
id: 4,
pos_name: 'Dry Process',
size: '',
parentId: 1,
// member: 'Tanmoy Ghosh (341)',
imgname: null,
desig_id: 4,
// desig_name: 'Manager-Laser Customer Relations',
file_path: null,
// status: 'completed',
imageUrl:
'http://103.154.184.122:8080/kpi_api_dev ... e/user.png',
},
{
id: 5,
pos_name: 'Wet Process',
size: '',
parentId: 1,
// member: 'Tanmoy Ghosh (341)',
imgname: null,
desig_id: 4,
// desig_name: 'Manager-Laser Customer Relations',
file_path: null,
// status: 'pending',
imageUrl:
'http://103.154.184.122:8080/kpi_api_dev ... e/user.png',
},

{
id: 6,
pos_name: 'Radix Lab to Fab Products',
size: '',
parentId: 1,
// member: 'Tanmoy Ghosh (341)',
imgname: null,
desig_id: 6,
// desig_name: 'Manager-Laser Customer Relations',
file_path: null,
// status: 'inprogress',
imageUrl:
'http://103.154.184.122:8080/kpi_api_dev ... e/user.png',
},

{
id: 7,
pos_name: "Strategic Technology Platforms",
size: "",
parentId: 1,
member: "Sanjay.G (476)",
imgname: null,
desig_id: 73,
desig_name: "Senior Officer - Costing",
file_path: null,
// status: 'completed',
imageUrl: "http://103.154.184.122:8080/kpi_api_dev ... e/user.png"
},
{
id: 8,
pos_name: 'Dry Process',
size: '',
parentId: 2,
// member: 'Tanmoy Ghosh (341)',
imgname: null,
desig_id: 4,
// desig_name: 'Manager-Laser Customer Relations',
file_path: null,
// status: 'completed',
imageUrl:
'http://103.154.184.122:8080/kpi_api_dev ... e/user.png',
},
{
id: 9,
pos_name: 'Wet Process',
size: '',
parentId: 2,
// member: 'Tanmoy Ghosh (341)',
imgname: null,
desig_id: 4,
// desig_name: 'Manager-Laser Customer Relations',
file_path: null,
// status: 'pending',
imageUrl:
'http://103.154.184.122:8080/kpi_api_dev ... e/user.png',
},

{
id: 10,
pos_name: 'Radix Lab to Fab Products',
size: '',
parentId: 2,
// member: 'Tanmoy Ghosh (341)',
imgname: null,
desig_id: 6,
// desig_name: 'Manager-Laser Customer Relations',
file_path: null,
// status: 'inprogress',
imageUrl:
'http://103.154.184.122:8080/kpi_api_dev ... e/user.png',
},

{
id: 11,
pos_name: "Strategic Technology Platforms",
size: "",
parentId: 2,
member: "Sanjay.G (476)",
imgname: null,
desig_id: 73,
desig_name: "Senior Officer - Costing",
file_path: null,
// status: 'completed',
imageUrl: "http://103.154.184.122:8080/kpi_api_dev ... e/user.png"
},

{
id: 0,
pos_name: "YES",
size: "",
parentId: "",
member: "Organizational Chart",

desig_id: 73,
desig_name: "",

}
]
}

console.log('Org Chart Data:', res.data);
console.log('ID type:', typeof res.data[0].id, 'ParentID type:', typeof res.data[0].parentId);
console.log('IDs:', res.data.map(item => item.id));
res.data.forEach(item => {
if (item.id === null || item.id === undefined || item.parentId === null || item.parentId === undefined) {
console.log('Null or undefined found:', item);
}
});

if (res) {
const chartContainer = d3.select('.chart-container');
chartContainer.append('defs')
.append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', '100%')
.attr('height', '100%');
this.chart = new OrgChart()
.container('.chart-container')
.layout('left')
.data(res.data)
.nodeWidth((d: any) => 300)
.initialZoom(0.8)
.nodeHeight((d: any) => 175)

.buttonContent(
({
node,
state,
}: {
node: HierarchyNode;
state: State;
}) => {
return ` padding: 3px 9px 3px 8px;font-size:10px;margin:auto auto;background-color:#007672;border: 1px solid #007672">

${node.data._directSubordinates}
${node.children
? ``
: ``
}


`;
}
)
.linkUpdate((d: any, i: any, arr: any) => {
const selection = d3.select('.chart-container');
const strokeColor = '#007672';
const strokeWidth = d.data._upToTheRootHighlighted ? 15 : 1;
selection.style('stroke', strokeColor);
selection.attr('stroke-width', strokeWidth);

if (d.data._upToTheRootHighlighted) {
selection.raise();
}
})
.childrenMargin((d: any) => 50)
.compactMarginBetween((d: any) => 35)
.compactMarginPair((d: any) => 90)
.nodeContent(function (
d: HierarchyNode,
i: number,
arr: HierarchyNode[],
state: State
) {
const nodeWithWidth = d as HierarchyNode & { width: number };
const imageUrl = d.data.imageUrl ? d.data.imageUrl : 'assets/masters/user.jpg';

let borderColor = 'lightgray'; // Default border color

if (d.data.status === 'pending') {
borderColor = 'orange';
} else if (d.data.status === 'inprogress') {
borderColor = 'blue';
} else if (d.data.status === 'completed') {
borderColor = 'green';
}
return `











${d.data.pos_name}

${d.data.desig_name}

${d.data.member}





`;
})

const zoom: any = d3
.zoom()
.scaleExtent([1, 10])
.on('zoom', (event: any) => {
chartContainer.attr('transform', event.transform);
});
chartContainer.call(zoom);

console.log("Chart after expandAll:", this.chart);
console.log("Chart after render:", this.chart);
this.chart.expandAll();

this.chart.render();

}

}

ngAfterViewInit() {
if (!this.chart) {

}
this.updateChart();
}

ngOnChanges() {
this.updateChart();
}
updateChart() {
if (!this.data) {
return;
}
if (!this.chart) {
return;
}
this.chart
.container('.chart-container')
.data(this.data)
.svgWidth(500)

.onNodeClick((d: any) => console.log(d + ' node clicked'))
.render();
}

}


Подробнее здесь: https://stackoverflow.com/questions/794 ... in-angular