createNodeHtml(d) {}

[mamjerez]

Congratulations on the magnificent library. Thank you for your work. Would it be possible to have a function to define the node, something less confusing, for example:

createNodeHtml(d) { // Pre-cálculo de valores const paddingSize = 25 + 2; const nodeWidth = d.width - 2; const nodeHeight = d.height - paddingSize; const marginTop = -(paddingSize + 20); const borderStyle = d.data._highlighted || d.data._upToTheRootHighlighted ? '5px solid #E27396' : '2px solid #808080';

    // Estilos definidos como constantes
    const nodeContainerStyle = `width:${d.width}px; height:${d.height}px; padding-top:${paddingSize}px; padding-left:1px; padding-right:1px`;
    const nodeStyle = `font-family: 'Inter', sans-serif; margin-left:-1px; border-radius:10px; background-color:#FFFFFF; width:${nodeWidth}px; height:${nodeHeight}px; border: ${borderStyle}`;
    const salaryStyle = `font-size:15px; display:flex; justify-content:flex-end; margin-top:5px; margin-right:8px`;
    const dotStyle = `display:flex; justify-content:flex-end; margin-top:5px; margin-right:8px`;
    const coloredCircleStyle = `background-color:#FFFFFF; margin-top:${marginTop}px; margin-left:15px; border-radius:100px; width:50px; height:50px;`;
    const imageContainerStyle = `margin-top:${marginTop}px; margin-left:20px;`;
    const imageStyle = `border-radius:100px; width:40px; height:40px;`;
    const nameStyle = `font-size:15px; color:#08011E; margin-left:20px; margin-top:10px`;
    const positionStyle = `color:#716E7B; margin-left:20px; margin-top:3px; font-size:10px`;

    // Aplicación de estilos a los enlaces
    d3.selectAll('.link').style('stroke', 'grey').style('stroke-width', '2px');

    return `
    <div style="${nodeContainerStyle}">
      <div style="${nodeStyle}">
        <div style="${salaryStyle}">${d.data.salary} €</div>
        <div style="${dotStyle}">.</div>
        <div style="${coloredCircleStyle}"></div>
        <div style="${imageContainerStyle}"><img src="${d.data.image}" style="${imageStyle}" /></div>
        <div style="${nameStyle}">${d.data.name}</div>
        <div style="${positionStyle}">${d.data.position}</div>
      </div>
    </div>
  `;
}

[bumbeishvili]

Not exactly sure I understand what you mean but you can certainly have less confusing HTML generation

https://stackblitz.com/edit/js-yw1urt?file=index.html

You can also check out other examples

https://github.com/bumbeishvili/org-chart#features

[mamjerez]

Thank you for your quick response. My observation is to have the HTML code in a function, which allows for better structuring and easier variable modification. But this is just the opinion of a beginner. Here is the example code: https://stackblitz.com/edit/js-s4fsy9?file=index.html

A few more complex example: https://stackblitz.com/edit/js-qjelje?file=index.html

[bumbeishvili]

Looks good, whatever suits your requirement, you should go for it

[mamjerez]

Thanks for your comment. I hope you continue to improve your magnificent library