Angular v17 project fails to render actual template property in the sample data

[AlKoch]

Describe the bug
I am using Angular v17 and have been able to get a chart to display but it appears there may be a bug in the latest version of this (very nice/awesome) library:

• First, all of the documentation references TreeChart but after that failed to compile I looked at the source and see that it has been (I think) renamed to OrgChart.
• The problem is that the chart being rendered is using the default nodeContent defined at line 103 in the source so that each node looks like "override using chart.nodeContent(". I have been able to override this with chart.nodeContent((node, i, arr, state) => {return <div>Hello World</div>}) which shows "Hello Word" for each node but I can't get your actual sample data template to be displayed.
• I am rather confident that the data has been fetched and is being mapped/processed by d3 correctly since a log statement right before rendering shows the correct and I am getting many nodes being displayed (I can expand and contract the various levels) but the node content (template property) that is in the data set is not being displayed - the default nodeContent from line 103 is.

To Reproduce
I found three Angular projects where two display the correct node template but the third fails in the same way my code is failing:
Works:

• https://stackblitz.com/edit/d3-org-chart-angular-integration-muka3u?file=src%2Fapp%2Fapp.component.ts%2Csrc%2Fapp%2Fapp.component.html%2Csrc%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.html
• https://stackblitz.com/edit/d3-org-chart-angular-integration?file=src%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.ts%2Csrc%2Fapp%2Fapp.component.ts
  Fails:
• https://stackblitz.com/edit/angular-ivy-gneris?file=src%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.ts%2Csrc%2Fapp%2Fapp.component.ts

Expected behavior
The correct node content as seen in the 1st two URLs above.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Version 119.0.1

Smartphone (please complete the following information):

Additional context
Is there a current document for use with "modern" Angular. The failed URL above is using v12?

Thank you for your help.

[bumbeishvili]

Hi Alkoch, can you fork and link an actual failed sample with the issue reproduced? When I tested the third link, it was working as expected.

As for the Angular, yes it's using an v12 , it's just a guide how you can use it within angular

[AlKoch]

Thanks for the prompt reply!

As I've studied this further, I can better understand the source of my confusion:

1. I have no idea why this link is working for you and not for me. I have attached a snapshot of what I see in both Firefox and Chrome @ https://stackblitz.com/edit/angular-ivy-gneris?file=src%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.ts%2Csrc%2Fapp%2Fapp.component.ts.

2. Concerning that link, I said it is failing for me but more precisely it is failing to display the nodes as styled but is instead displaying the default nodeContent I see in the library source at line 103. Having said that, it seems that it actually is "working" because I see no code that actually uses the data to produce a styled result and therefore, without an "override" for nodeContent, it displays the default in the libary source. All I see in the sample source at the above URL is:
   this.chart
   .container(this.chartContainer.nativeElement)
   .data(this.data)
   .nodeWidth(d => 200)
   .nodeHeight(d => 120)
   .render();

Since there is a node in the chart for each data item in the JSON it seems that the above is fetching the data but I can't find any code in this sample that defines what the node should look like, hence the default "message" being used to "style" each node.

3. In contrast, the other two links (below) (which fetch JSON data but I don't think that matters) somehow do display styled nodes:
   https://stackblitz.com/edit/d3-org-chart-angular-integration-muka3u?file=src%2Fapp%2Fapp.component.ts%2Csrc%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.ts
   https://stackblitz.com/edit/d3-org-chart-angular-integration?file=src%2Fapp%2Fapp.component.ts%2Csrc%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.ts
   Are these really different?

This is where things get "mysterious". Both samples use the following code, which, like the 1st sample above, doesn't include any apparent way to define the node style but for some reason these two do display styled nodes:

this.chart
      .container(this.chartContainer.nativeElement)
      .data(this.data)
      .svgWidth(500)
      .initialZoom(0.4)
      .onNodeClick(d => console.log(d + ' node clicked'))
      .render();

I have searched all of the code and can't locate anything that would appear to define the node style. How are these two samples displaying styled nodes and why isn't the 1st one since they all appear to use the same code to render?

4. I finally located https://stackblitz.com/edit/web-platform-lwyild?file=index.html which includes .nodeContent() which I see contains code that appears to style each node. That makes sense but makes the other three samples "mysterious".

My questions are:
A) Is the sample code at https://stackblitz.com/edit/web-platform-lwyild?file=index.html the way we are supposed the define the node style?

B) If the answer to #1 is yes, then how are the two samples above producing the styled nodes we see without the use of .nodeContent() (you say the 1st sample works as well!)?

Thank you.

Al

[AlKoch]

Hi David,

Can you please take a look at my prior questions? Thank you.

Al

[bumbeishvili]

Hi , I see where the confusion is

You are supposed to define your node style in the nodeContent method

This example has different styling because it uses v1 of the org-chart, while the latest is v3

Here is a forked version of not working for you, working for me sample with nodeContent defined, this one uses v2 version but I think it will also work with v3

[AlKoch]

Hi David,

1. I still don't understand how https://stackblitz.com/edit/d3-org-chart-angular-integration-muka3u?file=src%2Fapp%2Fapp.component.ts,package.json is drawing the chart when it doesn't include a call to nodeContent. Where is the node's "visual appearance" defined? Is the answer that this sample is based on a version prior to version 3.1.1 and in earlier versions the node's visual appearance was "hard coded" to exactly one "format"?

2. In the library source (v3.1.1) I see "// Set data, it must be an array of objects, where hierarchy is clearly defined via id and parent ID (property names are configurable)." I notice that in all of the samples that use JSON that I've seen the tree is a flat JSON structure with no hierarchy (no "children" property). Our chart definition data is hierarchical in structure (like what is used in a "raw" d3 Tree) such as follows but I get a chart that only contains the 1st node. Are we only able to use a flat array of node objects and cannot use a hierarchy as in the following?.
   const orgChartData: IOrgChartData[] =
   [
   {
   title: Employee,
   nodeId: 1,
   parentNodeId: ``,
   name: 'CEO',
   imageURL: https://via.placeholder.com/40x40,
   children: [
   {
   nodeId: `2`,
   parentNodeId: `1`,
   title: `Employee`,
   name: 'Manager 1',
   imageURL: `https://via.placeholder.com/40x40`,
   children: [...

3. I need to activate a UI where someone can click to select a node so they can, for example, add a node beneath the selection or edit the data for the selection. In the library source I see nodeUpdate but I can't figure out how to implement a custom nodeUpdate in Angular 17 because of numerous Type errors. Can you point me to a sample where nodeUpdate is used in an Angular project?

Thank you for the help.

Al

[bumbeishvili]

I still don't understand how https://stackblitz.com/edit/d3-org-chart-angular-integration-muka3u?file=src%2Fapp%2Fapp.component.ts,package.json is drawing the chart when it doesn't include a call to nodeContent. Where is the node's "visual appearance" defined? Is the answer that this sample is based on a version prior to version 3.1.1 and in earlier versions the node's visual appearance was "hard coded" to exactly one "format"?

Yes, it was using different default visual appearance

In the library source (v3.1.1) I see "// Set data, it must be an array of objects, where hierarchy is clearly defined via id and parent ID (property names are configurable)." I notice that in all of the samples that use JSON that I've seen the tree is a flat JSON structure with no hierarchy (no "children" property). Our chart definition data is hierarchical in structure (like what is used in a "raw" d3 Tree) such as follows but I get a chart that only contains the 1st node. Are we only able to use a flat array of node objects and cannot use a hierarchy as in the following?.

You have to use the flat format. One of the examples has a similar case and converts nested data to flat one
https://github.com/bumbeishvili/org-chart?tab=readme-ov-file#features

I need to activate a UI where someone can click to select a node so they can, for example, add a node beneath the selection or edit the data for the selection. In the library source I see nodeUpdate but I can't figure out how to implement a custom nodeUpdate in Angular 17 because of numerous Type errors. Can you point me to a sample where nodeUpdate is used in an Angular project?

No, don't have the sample. In my case, I tend to just disable type-checking for files where d3 was involved

[AlKoch]

Hi David,

Thanks for the answers!

Al