bumbeishvili / org-chart Goto Github PK
View Code? Open in Web Editor NEWHighly customizable org chart. Integrations available for Angular, React, Vue
Home Page: https://stackblitz.com/edit/web-platform-o5t1ha
License: MIT License
Highly customizable org chart. Integrations available for Angular, React, Vue
Home Page: https://stackblitz.com/edit/web-platform-o5t1ha
License: MIT License
Hi David,
I've tried to call the update() method with a new set of json source.
VM2961:1 Uncaught ReferenceError: update is not defined
at :1:1
is it possible to re-draw the graph with new data?
@bumbeishvili Is there a way to get native html event when a user click a node?
How can I disable the zoom and drag.
pre-req: open chrome dev tools
STR:
Go to the demo site https://observablehq.com/@bumbeishvili/d3-v5-organization-chart
Collapse root node (Ian Devling)
Click on button expand node with id O-111
Expected Result: Nodes should expand, no errors thrown
Actual Result: Error thrown in console; nothing happens.
The error is being thrown from this line https://github.com/bumbeishvili/d3-organization-chart/blob/master/index.js#L1074
The root has no children when everything is collapsed.
is it possible to change the orientation of chart ?
We want left to right instead top to bottom.
Use d3.flextree instead of standard d3 tree, since it offers more freedom towards compact layout
Hello
How can I focus on a node by its Id and put it on the center of screen.
Actually I want to search a node via its Id and somehow highlight it.
The use of naked eval()
calls is triggering a CSP error when I try to use this library. I have submitted a PR here: #39 to address the issue.
I am trying to obtain a functionality where I have to show some relationship of parent and child ( two levels down) is there any way to do that if it has been already implemented where can I get it?
Using your reference:
https://observablehq.com/@bumbeishvili/d3-v5-organization-chart
I'm trying to add conditionally progress bar, but to no avail.
You hints would help a lot:
Partial snippet in my angular component:
d3.hierarchy(dataSource)
.descendants()
.map(d => {
.............
template:
'<div *ngIf="${isApplicable}">
<ngb-progressbar type="${progressColor}" [value]="80" height="9px">
80%
</ngb-progressbar>
</div>'
.................
}
Is it possible to build a 2 way Org Chart. which to add a level of nodes on the top of the root(company) to show the owners/stockholder of it.
Add search functionality that will provide relevant potential nodes. Then explore the graph from the chosen node enabling exploration towards the root and away from the root.
It would be possible to create extra links
Example: https://balkangraph.com/OrgChartJS/Demos/clink
Hey, it's me again. ;-)
Is there a way to make the org chart responsive or to be more precise: to make the canvas responsive?
Once resizing the browser window the canvas does redraw itself. Is there a way to force this without listening to the window resize event and call the render
method again?
I know there are several conditions where org-chart will trigger an error:
I could use try catch
when rendering the org-chart, but is there a better way to catch errors above?
I followed the steps as per your sample angular stackblitz example. I get the following error
core.js:4197 ERROR TypeError: Cannot read property 'transform' of undefined
at TreeChart.zoomed (d3-org-chart.js:1185)
at SVGSVGElement.<anonymous> (d3-org-chart.js:167)
at Dispatch.call (dispatch.js:57)
at Gesture.emit (zoom.js:219)
at Gesture.zoom (zoom.js:207)
at SVGSVGElement.wheeled (zoom.js:262)
at SVGSVGElement.<anonymous> (on.js:3)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27424)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
I am using this particular version
Angular CLI: 10.0.7
Node: 10.22.0
OS: win32 x64
Angular: 10.0.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.7
@angular-devkit/build-angular 0.1000.7
@angular-devkit/build-optimizer 0.1000.7
@angular-devkit/build-webpack 0.1000.7
@angular-devkit/core 10.0.7
@angular-devkit/schematics 10.0.7
@angular/cli 10.0.7
@ngtools/webpack 10.0.7
@schematics/angular 10.0.7
@schematics/update 0.1000.7
rxjs 6.5.5
typescript 3.9.7
webpack 4.43.0
I tried to import index.js
into my project and I still face the same error. Is there any quick workaround to fix the issue?
I saw that the usage of the provided nodeIcon
is ignored (cf. node-icon-image
in your code).
Why is it like that? I would love to use a custom icon for collapsing nodes.
Hello,
Can you give me a tip on how to customize this solution for a node to support multi parent.
Because of the different font-size of the chars +- (26 resp 40) with possible combination of char placement in font, it looks like they are little off center.
Not 100% certain if it is a easy fix or just a fix for given font-family, but you could off the - sign little to make the feel more aligned.
Have tried with replacing:
.attr('y', this.isEdge() ? 10: 0)
with
.attr('y', ({ children }) => this.isEdge() ? 10 : children ? -3 : 0)
and it feels a little better.
Is your feature request related to a problem? Please describe.
Not a problem, but just a preference - in my project I'd like to display the chart elements expanding out horizontally to the right, rather than top-down. Example:
Describe the solution you'd like
Ideally this would be a parameter that could be passed as a part of the exposed variables, but I also think it might be possible just to modify the JS file to change the way that the elements are laid out.
I was intrigued by the way the nodes were positioned, as well as how the paths were generated in diagonal(), but I haven't quite played around enough to be able to alter this logic to do what I want - to orientate descendants horizontally towards the right, rather than spreading out top-to-bottom.
Describe alternatives you've considered
I tried my hand at modifying the JS file and looked around for an option or configuration I might have missed, but I came up empty - maybe @bumbeishvili has thoughts on how to make it work this way? If not, no worries, thanks anyway for this fantastic project.
When addNode triggered, it only expands root node and the target parent node is not expanded.
Expands target parentNode when added a node
This functions well in the reference implementations, and it initially worked in my implementation, but it is not currently behaving well for me. This leads me to believe I have borked my implementation in some way - maybe because I'm re-rendering the chart on data changes. Please advise if you know of a way to fix my usage. Details of my problem:
I think the fix is to move the // Add background rectangle for node image
code down a few lines so it is after the // Add foreignObject element inside rectangle
code. That seems to fix it locally for me. However, even with current code order, I see that the DOM elements render in the correct order in the reference implementations. I'm interested in any unintended side effects this may introduce. Image may be rendered before template for good reason.
Please forgive my general lack of knowledge if I'm misinterpreting something basic. I'm very new to web development. Thanks for an awesome org chart!
Chart Class is using D3 as base, so it is possible to change orientation of chart as well?
Hello David,
Could you please help me to find the starting position? (Since I am trying to use it horizontal, I need to start from middle left, instead of middle top)
Hi I am using the older version of this project link.
but if a node has 40-50 children the view gets cluttered an you have to scroll left/right too much.
I was wondering if there is an easy way to shown "n" number of nodes on each level and will have previous next button to show the next n.
from my understanding this isn't currently implemented in the code right now, so I am looking for any pointers / previous work to start.
How can we minimise the distance between nodes when both of the nodes are expanded.
Please find below link for the better illustration of the problem.
@bumbeishvili could you please help me resolving this issue.
and sample code pen is https://codepen.io/rajat-sf/pen/ZELmmLr?editors=1010
Thanks for this wonderful repository having almost ready to use code.
Hey David,
This chart is awesome and very flexible too. I'm trying to manipulate this chart as per my need but i'm little bit in dilemma when it comes to view of nodes they are all scatter on the screen and looks ugly and frustrating at times when there are lots of nodes under a parent. Could it be possible to make them stacked one on another. Though i have tried several hit and trial but unable to achieve. It would be very helpful if you can give some idea around this implementation.
Hello David,
As you can see attached video, collapse and expand animations are acting so weird. I am sending the collapsed and expanded JSON sources as well. Could you please help me to find it out? (You can see source JSON's and describing video below)
Collapsed
[{"nodeId":"1","parentNodeId":null,"expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"<div style='height: 75px; width: 260px; background-color:white'>\n <pre style='color:black; padding-top:3px; font-family:arial'>\n Node Info\n General Node Information\n This node is so good,\n check this node. really good \n </pre>\n</div>","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Root Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"2","parentNodeId":"1","expanded":true,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#FFFF00","width":5,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#FFFF00","lineWidth":5}},{"nodeId":"3","parentNodeId":"1","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"4","parentNodeId":"2","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"5","parentNodeId":"2","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"6","parentNodeId":"3","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"7","parentNodeId":"3","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"8","parentNodeId":"3","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"9","parentNodeId":"4","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"10","parentNodeId":"4","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"11","parentNodeId":"9","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"12","parentNodeId":"9","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"13","parentNodeId":"10","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"14","parentNodeId":"11","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"15","parentNodeId":"7","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"16","parentNodeId":"7","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"17","parentNodeId":"15","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"18","parentNodeId":"17","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"19","parentNodeId":"17","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"20","parentNodeId":"18","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"21","parentNodeId":"6","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"22","parentNodeId":"6","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"23","parentNodeId":"21","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"24","parentNodeId":"21","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"25","parentNodeId":"22","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"26","parentNodeId":"22","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"27","parentNodeId":"26","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"28","parentNodeId":"26","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"29","parentNodeId":"8","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"30","parentNodeId":"8","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}}]
Expanded
[{"nodeId":"1","parentNodeId":null,"expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"<div style='height: 75px; width: 260px; background-color:white'>\n <pre style='color:black; padding-top:3px; font-family:arial'>\n Node Info\n General Node Information\n This node is so good,\n check this node. really good \n </pre>\n</div>","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Root Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"2","parentNodeId":"1","expanded":true,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#FFFF00","width":5,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#FFFF00","lineWidth":5}},{"nodeId":"3","parentNodeId":"1","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"4","parentNodeId":"2","expanded":true,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#FFFF00","width":5,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#FFFF00","lineWidth":5}},{"nodeId":"5","parentNodeId":"2","expanded":true,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#FFFF00","width":5,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#FFFF00","lineWidth":5}},{"nodeId":"6","parentNodeId":"3","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"7","parentNodeId":"3","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"8","parentNodeId":"3","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"9","parentNodeId":"4","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"10","parentNodeId":"4","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"11","parentNodeId":"9","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"12","parentNodeId":"9","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"13","parentNodeId":"10","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"14","parentNodeId":"11","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"15","parentNodeId":"7","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"16","parentNodeId":"7","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"17","parentNodeId":"15","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"18","parentNodeId":"17","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"19","parentNodeId":"17","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"20","parentNodeId":"18","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"21","parentNodeId":"6","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"22","parentNodeId":"6","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"23","parentNodeId":"21","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"24","parentNodeId":"21","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"25","parentNodeId":"22","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"26","parentNodeId":"22","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"27","parentNodeId":"26","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"28","parentNodeId":"26","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"29","parentNodeId":"8","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}},{"nodeId":"30","parentNodeId":"8","expanded":false,"width":342,"height":146,"backgroundColorHex":"#0FB6D0","template":"","directSubordinates":0,"totalSubordinates":0,"border":{"colorHex":"#0F8C79","width":1,"radius":5},"nodeIcon":{"icon":"http://www.iconsdb.com/icons/preview/white/data-protection-xxl.png","size":30},"nodeInfo":{"name":"Node","minorInfo":"Foo bar aaa cc"},"connector":{"lineColorHex":"#DCBDCF","lineWidth":5}}]
Screen Recording 2020-02-18 at 14.03.58.mov.zip
I'd be so happy if you find some time to help me to find the problem.
Cheers
Hi,
I will most probably use your code dt-organization-chart, nice coding.
I am new to github interactions and have a question.
I have made so far only smaller changes and was planning tackle custom name for direct and total subordinates. Nothing fancy but I also may need to change the position somehow.
I found out by browsing forks that it has already been done:
https://github.com/rhodief/d3-organization-chart
So what is the best practice?
Should I ask you for the feature and then ask him to insert it into your code or should i ask him if i could copy it to my fork?
Best regards
Andor
On Firefox 68.12.0 it appears that the '+' and '-' sign are not centered in the circle. I'm seeing this in both mac and windows. At first I thought this had to do with how we were doing some styling in the nodes, but I went to the observable d3 org chart to look at the demo and it's doing the same there.
see the attached screenshot.
Hi, on the very first line you declare d3 but with angular 8 it will only work if you declare it as a const.
Use storybook for documenting org chart
For my use, we don't need the images. If I take out the nodeImage
from the example you have, I get a 'cannot read property 'url' of undefined' at the "add images to pattern" part of the code where it tries to look for an image. Is there something that needs to be done to ignore the image?
The code below is from Chrome dev tools.
// Add images to patterns
const patternImages = patterns.patternify({
tag: 'image',
selector: 'pattern-image',
data: d => [d]
})
.attr('x', 0)
.attr('y', 0)
.attr('height', ({
imageWidth
}) => imageWidth)
.attr('width', ({
imageHeight
}) => imageHeight)
.attr('xlink:href', ({
data
}) => data.nodeImage.url) <------ HERE
.attr('viewbox', ({
imageWidth,
imageHeight
}) => `0 0 ${imageWidth * 2} ${imageHeight}`)
.attr('preserveAspectRatio', 'xMidYMin slice')
Merged PR - #70
See instructions here - https://bost.ocks.org/mike/d3-plugin/
Use only necessary code pieces for development (instead of global d3) in order to allow the tree shaking (reduced bundle size)
See an example here - https://github.com/bumbeishvili/d3-v6-tip
Hi David,
Is there any way to set minimum and/or maximum zoom level?
Hello,
I have forked the repository and trying to make it work with my data. I have not been successful in generating a chart using the data I have, which mirrors the one in the source repository.
What I am missing or doing wrong? I am using the email addresses of the managers as the parentNodeId.
I am using d3-org-chart version 1.1.13 of the script along with d3.v5.16
Thank you for your reply.
missing: [email protected]
▼ 2 stack frames were expanded.
stratify
https://91hlv.csb.app/node_modules/d3-hierarchy/src/stratify.js:34:29
TreeChart.render
https://91hlv.csb.app/node_modules/d3-org-chart/index.js:179:13
▲ 2 stack frames were expanded.
eval
/index.js:19:5
16 | .svgHeight(window.innerWidth)
17 | .initialZoom(0.6)
18 | .onNodeClick((d) => console.log(d + " node clicked"))
> 19 | .render();
| ^
20 | });
21 |
Data: https://gist.githubusercontent.com/ebitsdev/df73973abe2992885bd643ff952dedb9/raw/e93bc8556b300a005b3de8e6b2b7bffc88a40ed0/org_chart_data.json.
Project: https://codesandbox.io/s/broken-framework-91hlv?file=/index.js
hi,
How can we increase vertical space between two levels
PFA for better illustration.
https://user-images.githubusercontent.com/77266357/115686655-0c6f7980-a377-11eb-8c3b-d39d06e59bd6.png
Thanks
Describe the bug
Data of size 1 is not supported and leads to error TypeError: Cannot read property 'forEach' of undefined
happening here:
// Collapse all children at first
attrs.root.children.forEach(d => this.collapse(d));
// Then expand some nodes, which have `expanded` property set
attrs.root.children.forEach(d => this.expandSomeNodes(d));
To Reproduce
Steps to reproduce the behavior:
this.chart.data(data).render()
Expected behavior
Org chart should show the root element
Could you please fix this?
Also, there is a new dev version in progress - check the roadmap here - #14
I am developing the project using Reactjs and Redux. In my platform, we need to use the d3-organization chart
to show for the company tree to the user.
Integrating this library to react and the data would be loaded from Backend APIs.
Use Let’s Make a (D3) Plugin pattern for consistent result
Hello David,
First of all, that an amazing job! Thanks for sharing that all free, I am glad!
Is that possible to use the chart vertically and limit the initial number of level of the nodes.
As default, it comes horizontal and with 3 levels of nodes.
Thanks in advance!
Describe the bug
When updating the org chart on Angular it is always re-centered in the svg. This bug happens on the Angular example as well as reproduced in a test app (both on D3 v5 and v6 Angular 11). The problem is not happening on the Observable example
To Reproduce
Move around the chart and click the button
Expected behavior
The chart should not re-center working fine on below example (move around the chart in the svg and add a new root node)
https://observablehq.com/@bumbeishvili/d3-v5-organization-chart
Screenshots
Please see example links
Desktop (please complete the following information):
Chrome latest as of 14 June 2021
Smartphone (please complete the following information):
Not tested
Additional context
Also, there is a new dev version in progress - check the roadmap here - #14
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.