Hi, I used d3 OrgChart and implemented my code as below:
d3.json(
url.href
).then((dataFlattened) => {
modes = modes.map(element => { if (element.checked) { element.checked = false; } else { element.checked = true; } return element; });
const mappedData = dataFlattened.map((d) => {
const width = Math.round(Math.random() * 50 + 300);
const height = Math.round(Math.random() * 20 + 130);
const cornerShape = ['ORIGINAL', 'ROUNDED', 'CIRCLE'][
Math.round(Math.random() * 2)
];
const nodeImageWidth = 100;
const nodeImageHeight = 100;
const centerTopDistance = 0;
const centerLeftDistance = 0;
const expanded = false; //d.id=="O-6"
const titleMarginLeft = nodeImageWidth / 2 + 20 + centerLeftDistance;
const contentMarginLeft = width / 2 + 25;
return {
nodeId: d.nodeId ,
nodeName: d.name,
parentNodeId: d.nodeParentId ,
nodeLevel: d.level,
width: width,
height: height,
borderWidth: 1,
borderRadius: 5,
borderColor: {
red: 15,
green: 140,
blue: 121,
alpha: 1,
},
backgroundColor: {
red: 51,
green: 182,
blue: 208,
alpha: 1,
},
nodeImage: {
url: d.imageUrl,
width: nodeImageWidth,
height: nodeImageHeight,
centerTopDistance: centerTopDistance,
centerLeftDistance: centerLeftDistance,
cornerShape: cornerShape,
shadow: false,
borderWidth: 0,
borderColor: {
red: 19,
green: 123,
blue: 128,
alpha: 1,
},
},
nodeIcon: {
icon: 'https://to.ly/1yZnX',
size: 30,
},
template: `<div id="position-${d.nodeId}" position-id="${d.nodeId}" level="${d.level}" class="position-level" style="direction:rtl;padding-right:20px;">
<div style="margin-left:${titleMarginLeft}px;
margin-top:10px;
font-size:15px;
font-weight:bold;
">${d.name}</div>
<div style="margin-left:${titleMarginLeft}px;
margin-top:3px;
font-size:11px;
max-width:235px;
">${d.positionName}</div>
<div style="margin-left:${titleMarginLeft}px;
margin-top:3px;
font-size:11px;
">${d.unit?.value || 'Unit'}</div>
<div style="
margin-top:15px;
font-size:11px;
position:absolute;
bottom:15px;
">
<div>${d.office}</div>
<div style="position:relative;font-size:11px;top:10px;text-align:right;padding-right:2px;">${d.area}</div>
</div>
</div>`,
connectorLineColor: {
red: 220,
green: 189,
blue: 207,
alpha: 1,
},
connectorLineWidth: 5,
dashArray: '',
expanded: false
};
});
//root = mappedData;
////console.log(root);
chart = new d3.OrgChart()
.container('.chart-container')
.data(mappedData)
.nodeWidth((n) => 375)
.nodeHeight((n) => 120)
//.childrenMargin((node) => node.Y = 130)
//.childrenMargin((node) => 60)
//.compactMarginBetween((d) => 50)
//.siblingsMargin((d) => 100)
.siblingsMargin(node => 20)
.childrenMargin(node => 150)
.neighbourMargin((n1, n2) => 80)
.compactMarginBetween(node => 50)
.compactMarginPair(node => 100)
.nodeContent((d) => {
//console.log(d);
return `<div class="outer-wrapper" style="margin-top:-30px;position:relative;padding-top:0px;background-color:none;width:${d.width - 70}px;height:${d.height}px">
<img style="position:absolute;top:0;border: 1px solid #cdcdcd;" width="120" height="120" src="${d.data.nodeImage.url}" onerror="this.style.opacity='0'"/>
<div class="template-wrapper" style="margin-top:30px;height: 120px;border: 1px solid #cdcdcd;border-radius:2px;color:000000;background-color:#FFFFFF;width:${d.width}px; height:${d.height}px">
<div style="margin-left:-30px;padding-top:2px">${d.data.template}</div>
</div>
<div style="position: relative;color: #FFFFFF;margin-top: -27px;margin-left: 1px;background: #ffffff3d;width: 118px;padding-left: 3px;font-size: 8px;text-shadow: -1px 0 black, 0 1px black,1px 0 black, 0 -1px black;"> ${d.data._totalSubordinates} Subordinates <br/> ${d.data._directSubordinates} Direct</div>
</div>
`;
})
.compact(false)
.render();
chart.data().sort(function (a, b) {
// Check if node a has an expand button
var aHasExpandButton = (a._totalSubordinates) ? 1 : 0;
// Check if node b has an expand button
var bHasExpandButton = (b._totalSubordinates) ? 1 : 0;
// Compare the presence of expand buttons
//if (aHasExpandButton !== bHasExpandButton) {
// return bHasExpandButton - aHasExpandButton;
//}
// If expand buttons are the same, compare the node names
//|| (a.nodeName.localeCompare(b.nodeName))
return (bHasExpandButton - aHasExpandButton);
});
chart.render();
I want to active some nodes on compact style with checking some flags and some other nodes have non-compact style like below:
How can to do like this
?