Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi parent #59

Open
sergiogomesamkor opened this issue Jun 23, 2021 · 7 comments
Open

Multi parent #59

sergiogomesamkor opened this issue Jun 23, 2021 · 7 comments
Labels
enhancement New feature or request

Comments

@sergiogomesamkor
Copy link

Hello,
Can you give me a tip on how to customize this solution for a node to support multi parent.

@bumbeishvili
Copy link
Owner

That won't be possible, since the org chart uses a tree algorithm, which expects a single parent.

In general, here is my answer to a similar question on StackOverflow
https://stackoverflow.com/questions/43527019/d3-tree-layout-visualization-inherit-child-with-multiple-parents/43529432#43529432

@bumbeishvili bumbeishvili mentioned this issue Jul 2, 2021
39 tasks
@bumbeishvili bumbeishvili added the enhancement New feature or request label Jul 2, 2021
@bumbeishvili
Copy link
Owner

FYO, in the new, coming version, we will have multi links functionality. You will be able to specify connections with labels between any nodes

https://github.com/bumbeishvili/d3-organization-chart/blob/ee33e5ed64afa0be1ca2c695ed4d525aae67f98e/tree.html#L138

It will look like this

Screenshot 2021-07-29 at 17 46 20

@bumbeishvili
Copy link
Owner

It got merged - #70

@TildeWill
Copy link
Contributor

Is there a way to modify the HTML/SVG for the connection? For example, I want to make the line dotted and not have an arrow head.

@bumbeishvili
Copy link
Owner

Yes, you can override connectionsUpdate method and just uncomment relevant lines

https://stackblitz.com/edit/web-platform-nrybqp

chart.connectionsUpdate(function (d, i, arr) {
            d3.select(this)
              .attr('stroke', (d) => '#152785')
              .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})`)
              .attr('stroke-dasharray', '20, 20');
          })

Screenshot 2021-09-26 at 14 27 41

@TildeWill
Copy link
Contributor

Perfect! Any way to change the anchor points to the sides of the boxes rather than the top and bottom?

@bumbeishvili
Copy link
Owner

I don't think so

This is the relevant line if you decide to change source code by yourself

return attrs.linkGroupArc({ source: { x: xs, y: ys }, target: { x: xt, y: yt } })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants