Untitled Application MyApp Author name 1.0 False 1020 680 True True False False WebApp False C:\Users\User\Documents\VisualNeoWeb\Libraries\img\default-icon.png en standalone Offline page #000000 / [AndroidOS,iOS,WindowsPhoneOS] normal True True False True True False False True False False <script src="https://d3js.org/d3.v7.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/d3-org-chart@2"></script> <script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js"></script> BeginJS //var chart; d3.json( 'https://www.conberge.info/organigrama/admin/api/collections/get/equipo/' ).then((theData) => { dataFlattened = new Object(); dataFlattened = theData.entries; console.log(dataFlattened); $App.chart = new d3.OrgChart() .container('.chart-container') .data(dataFlattened) .rootMargin(100) .nodeWidth((d) => 210) .nodeHeight((d) => 180) .childrenMargin((d) => 130) .compactMarginBetween((d) => 85) .compactMarginPair((d) => 80) .linkUpdate(function (d, i, arr) { d3.select(this) .attr('stroke', (d) => d.data._upToTheRootHighlighted ? '#0a355e' : '#0a355e' ) .attr('stroke-width', (d) => d.data._upToTheRootHighlighted ? 5 : 1.5 ) .attr('stroke-dasharray', '3,2'); if (d.data._upToTheRootHighlighted) { d3.select(this).raise(); } }) .nodeContent(function (d, i, arr, state) { const colors = [ '#ff5959', '#0a355e', '#0a355e', '#0a355e', '#0a355e', '#0a355e', ]; const color = colors[d.depth % colors.length]; const imageDim = 80; const lightCircleDim = 95; const outsideCircleDim = 110; if(d.data.areaSpanish == undefined){ return ` <div style="background-color:white; position:absolute;width:${ d.width }px;height:${d.height}px;"> <div style="background-color:${color};position:absolute;margin-top:-${outsideCircleDim / 2}px;margin-left:${d.width / 2 - outsideCircleDim / 2}px;border-radius:100px;width:${outsideCircleDim}px;height:${outsideCircleDim}px;"></div> <div style="background-color:#ffffff;position:absolute;margin-top:-${ lightCircleDim / 2 }px;margin-left:${d.width / 2 - lightCircleDim / 2}px;border-radius:100px;width:${lightCircleDim}px;height:${lightCircleDim}px;"></div> <img src=" https://conberge.info/organigrama/admin/storage/uploads${ d.data.imageUrl.path }" style="position:absolute;margin-top:-${imageDim / 2}px;margin-left:${d.width / 2 - imageDim / 2}px;border-radius:100px;width:${imageDim}px;height:${imageDim}px;" /> <div class="card" style="top:${ outsideCircleDim / 2 + 10 }px;position:absolute;height:30px;width:${d.width}px;background-color:#3AB6E3;"> <div style="font-family:arial;background-color:${color};height:auto;text-align:center;padding:5px;color:#ffffff;font-weight:bold;font-size:14px"> ${d.data.name}<br><small>${d.data.positionName}</small> </div> <div class="neo-middle-center-content" style="font-family:arial;background-color:#F0EDEF;height:65px;text-align:center;padding:5px;color:#0a355e;font-size:12px"> <i>${d.data.area}</i> </div> </div> </div> `; }else{ return ` <div style="background-color:white; position:absolute;width:${ d.width }px;height:${d.height}px;"> <div style="background-color:${color};position:absolute;margin-top:-${outsideCircleDim / 2}px;margin-left:${d.width / 2 - outsideCircleDim / 2}px;border-radius:100px;width:${outsideCircleDim}px;height:${outsideCircleDim}px;"></div> <div style="background-color:#ffffff;position:absolute;margin-top:-${ lightCircleDim / 2 }px;margin-left:${d.width / 2 - lightCircleDim / 2}px;border-radius:100px;width:${lightCircleDim}px;height:${lightCircleDim}px;"></div> <img src=" https://conberge.info/organigrama/admin/storage/uploads${ d.data.imageUrl.path }" style="position:absolute;margin-top:-${imageDim / 2}px;margin-left:${d.width / 2 - imageDim / 2}px;border-radius:100px;width:${imageDim}px;height:${imageDim}px;" /> <div class="card" style="top:${ outsideCircleDim / 2 + 10 }px;position:absolute;height:30px;width:${d.width}px;background-color:#3AB6E3;"> <div style="font-family:arial;background-color:${color};height:auto;text-align:center;padding:5px;color:#ffffff;font-weight:bold;font-size:14px"> ${d.data.name}<br><small>${d.data.positionName}</small> </div> <div class="neo-middle-center-content" style="font-family:arial;background-color:#F0EDEF;height:65px;text-align:center;padding:5px;color:#0a355e;font-size:12px"> <i>${d.data.area}<br> ${d.data.areaSpanish}</i> </div> </div> </div> `; } }) .render(); }); EndJS BeginJS //var chart; d3.json( 'https://www.conberge.info/organigrama/admin/api/collections/get/equipo/' ).then((theData) => { dataFlattened = new Object(); dataFlattened = theData.entries; console.log(dataFlattened); $App.chart = new d3.OrgChart() .container('.chart-container') .data(dataFlattened) .rootMargin(100) .nodeWidth((d) => 210) .nodeHeight((d) => 180) .childrenMargin((d) => 130) .compactMarginBetween((d) => 85) .compactMarginPair((d) => 80) .linkUpdate(function (d, i, arr) { d3.select(this) .attr('stroke', (d) => d.data._upToTheRootHighlighted ? '#0a355e' : '#0a355e' ) .attr('stroke-width', (d) => d.data._upToTheRootHighlighted ? 5 : 1.5 ) .attr('stroke-dasharray', '3,2'); if (d.data._upToTheRootHighlighted) { d3.select(this).raise(); } }) .nodeContent(function (d, i, arr, state) { const colors = [ '#ff5959', '#0a355e', '#0a355e', '#0a355e', '#0a355e', '#0a355e', ]; const color = colors[d.depth % colors.length]; const imageDim = 80; const lightCircleDim = 95; const outsideCircleDim = 110; if(d.data.areaSpanish == undefined){ return ` <div style="background-color:white; position:absolute;width:${ d.width }px;height:${d.height}px;"> <div style="background-color:${color};position:absolute;margin-top:-${outsideCircleDim / 2}px;margin-left:${d.width / 2 - outsideCircleDim / 2}px;border-radius:100px;width:${outsideCircleDim}px;height:${outsideCircleDim}px;"></div> <div style="background-color:#ffffff;position:absolute;margin-top:-${ lightCircleDim / 2 }px;margin-left:${d.width / 2 - lightCircleDim / 2}px;border-radius:100px;width:${lightCircleDim}px;height:${lightCircleDim}px;"></div> <img src=" https://conberge.info/organigrama/admin/storage/uploads${ d.data.imageUrl.path }" style="position:absolute;margin-top:-${imageDim / 2}px;margin-left:${d.width / 2 - imageDim / 2}px;border-radius:100px;width:${imageDim}px;height:${imageDim}px;" /> <div class="card" style="top:${ outsideCircleDim / 2 + 10 }px;position:absolute;height:30px;width:${d.width}px;background-color:#3AB6E3;"> <div style="font-family:arial;background-color:${color};height:auto;text-align:center;padding:5px;color:#ffffff;font-weight:bold;font-size:14px"> ${d.data.name}<br><small>${d.data.positionName}</small> </div> <div class="neo-middle-center-content" style="font-family:arial;background-color:#F0EDEF;height:65px;text-align:center;padding:5px;color:#0a355e;font-size:12px"> <i>${d.data.area}</i> </div> </div> </div> `; }else{ return ` <div style="background-color:white; position:absolute;width:${ d.width }px;height:${d.height}px;"> <div style="background-color:${color};position:absolute;margin-top:-${outsideCircleDim / 2}px;margin-left:${d.width / 2 - outsideCircleDim / 2}px;border-radius:100px;width:${outsideCircleDim}px;height:${outsideCircleDim}px;"></div> <div style="background-color:#ffffff;position:absolute;margin-top:-${ lightCircleDim / 2 }px;margin-left:${d.width / 2 - lightCircleDim / 2}px;border-radius:100px;width:${lightCircleDim}px;height:${lightCircleDim}px;"></div> <img src=" https://conberge.info/organigrama/admin/storage/uploads${ d.data.imageUrl.path }" style="position:absolute;margin-top:-${imageDim / 2}px;margin-left:${d.width / 2 - imageDim / 2}px;border-radius:100px;width:${imageDim}px;height:${imageDim}px;" /> <div class="card" style="top:${ outsideCircleDim / 2 + 10 }px;position:absolute;height:30px;width:${d.width}px;background-color:#3AB6E3;"> <div style="font-family:arial;background-color:${color};height:auto;text-align:center;padding:5px;color:#ffffff;font-weight:bold;font-size:14px"> ${d.data.name}<br><small>${d.data.positionName}</small> </div> <div class="neo-middle-center-content" style="font-family:arial;background-color:#F0EDEF;height:65px;text-align:center;padding:5px;color:#0a355e;font-size:12px"> <i>${d.data.area}<br> ${d.data.areaSpanish}</i> </div> </div> </div> `; } }) .render(); }); EndJS 14px 18px 959px 544px chart-container 0px 0px 1020px 680px False custom