bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
928 stars 330 forks source link

How to change the color of highlighted element? #208

Closed hy-net closed 1 year ago

hy-net commented 2 years ago

How to set the highlighted color when callig setHighlighted()

bumbeishvili commented 2 years ago

You have to override linkUpdate function

https://github.com/bumbeishvili/org-chart/blob/3b7cc9d332d657ed5e710631abaad36dfc5ebe0f/src/d3-org-chart.js#L72

chart.linkUpdate(function (d, i, arr) {
                d3.select(this)
                    .attr("stroke", d => d.data._upToTheRootHighlighted ? '#152785' : 'lightgray') // modify your color here
                    .attr("stroke-width", d => d.data._upToTheRootHighlighted ? 5 : 2)

                if (d.data._upToTheRootHighlighted) {
                    d3.select(this).raise()
                }
            })
hy-net commented 2 years ago

@bumbeishvili, this seems to highlight the link.

May I know how to change the color of the Node itself when highlighted?

bumbeishvili commented 2 years ago

There is a node update function which does the same for node

You can see its content here

https://github.com/bumbeishvili/org-chart/blob/3b7cc9d332d657ed5e710631abaad36dfc5ebe0f/src/d3-org-chart.js#L81