First, I want to express my sincere appreciation for this incredible work of yours!</p

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

<a target="_blank" rel="noopener noreferrer" href="https://private-user-images.githubu

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Multiple lines of responsibility about org-chart HOT 9 OPEN

harinvp commented on June 9, 2024

Multiple lines of responsibility

from org-chart.

Comments (9)

bumbeishvili commented on June 9, 2024 1

Hi, you have the possibility to connect any node to any node

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

You also have the possibility to style it differently

org-chart/src/d3-org-chart.js

Lines 281 to 289 in 0b70fef

 connectionsUpdate: function (d, i, arr) { 

 d3.select(this) 

 .attr("stroke", d => '#E27396') 

 .attr('stroke-linecap', 'round') 

 .attr("stroke-width", d => '5') 

 .attr('pointer-events', 'none') 

 .attr("marker-start", d => `url(#${d.from + "_" + d.to})`) 

 .attr("marker-end", d => `url(#arrow-${d.from + "_" + d.to})`) 

 },

1 - you can use connections to achieve something like that
2 - You can already adjust node positions artificially, but providing bigger width and height than it needs and then manipulating margins and padidngs inside
3 - You can customize it as you want in connectionsUpdate method
4 - You control the data, you are free to restructure it any way
5 - That is certainly weak area of the library - It would help to have documentation and examples highlighting what I wrote above

from org-chart.

bumbeishvili commented on June 9, 2024 1

Node can't have 2 parents

from org-chart.

harinvp commented on June 9, 2024

Thank you so much for the quick response . What I mean is to have both lines in the same chart. For example if A is reporting to B and C, if we can show A to B in color blue and A to C in red. So in this case the chart shows two reporting lines , one is blue and other is red. And both lines can have multiple nodes Thanks, Hari

…

On Tue, 6 Feb 2024 at 5:10 pm, David Bumbeishvili ***@***.***> wrote: Hi, you have the possibility to connect any node to any node https://stackblitz.com/edit/js-tpbt7r?file=index.html You also have the possibility to style it differently https://github.com/bumbeishvili/org-chart/blob/0b70fef70f801855e335f7db061237491eaa31fd/src/d3-org-chart.js#L281-L289 #1 <#1> - you can use connections to achieve something like that #2 <#2> - You can already adjust node positions artificially, but providing bigger width and height than it needs and then manipulating margins and padidngs inside #3 <#3> - You can customize it as you want in connectionsUpdate method #4 <#4> - You control the data, you are free to restructure it any way #5 <#5> - That is certainly weak area of the library - It would help to have documentation and examples highlighting what I wrote above — Reply to this email directly, view it on GitHub <#355 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGAUU6BGX3223ZWUBYDORIDYSHCO7AVCNFSM6AAAAABC3LNWDOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRYHA2TAMBQGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

from org-chart.

harinvp commented on June 9, 2024

Hi @bumbeishvili
Could you please throw some light on the above? Like how can I approach the code modifications if I want to achieve the above? Thank you!

from org-chart.

bumbeishvili commented on June 9, 2024

@harinvp I could not understand the previous message exactly, can you draw the layout roughly and post it as an image ?

from org-chart.

harinvp commented on June 9, 2024

Thank you! Here is the image attached. In this example the primary reporting line (Red) is Ian -> Ava, Sohphie and Ava -> Amol. In the secondary reporting line (Green) is Ian ->Sophie-> Ava, Amol. So basically same people but two kinds of reporting. It would be great if we can represent both lines in same chart ( and showing it in two different styles like colors or line border)

from org-chart.

veranika-shvakava commented on June 9, 2024

Hi @bumbeishvili!
I would also like to clarify whether a node can have two parents? If it can, then how can this be achieved?
Below is an example

from org-chart.

veranika-shvakava commented on June 9, 2024

Node can't have 2

Got it. However, can we center the last card? If node cannot have two parents, just center the last card and use Multi Node Connections...

from org-chart.

Arkarrow commented on June 9, 2024

Hi @veranika-shvakava👋 !
I have the same problem as you, did you find a solution?

from org-chart.

Multiple lines of responsibility about org-chart HOT 9 OPEN

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	connectionsUpdate: function (d, i, arr) {
	d3.select(this)
	.attr("stroke", d => '#E27396')
	.attr('stroke-linecap', 'round')
	.attr("stroke-width", d => '5')
	.attr('pointer-events', 'none')
	.attr("marker-start", d => `url(#${d.from + "_" + d.to})`)
	.attr("marker-end", d => `url(#arrow-${d.from + "_" + d.to})`)
	},