half size layer while 2 layer are same value

[amantiwari1]

Describe the bug A clear and concise description of what the bug is. there is a bug which is 2 layers are same value with different Size layer

To Reproduce Steps to reproduce the behavior: no Step

Expected behavior Expected 2 layers should be the same size

Screenshots 2 layer are same value but below pic are different size with the same value

Desktop (please complete the following information):

• OS: Windows 10
• Browser Edge
• Version 91

Smartphone (please complete the following information): no phone

Additional context no addition

[vasturiano]

@amantiwari1 thanks for reaching out.

Could you make a simple example on codepen that reproduces this issue, so we can debug further?

[amantiwari1]

Sure, I will send

[amantiwari1]

here's codepen: - https://codepen.io/amantiwari1/pen/VwbBroK

[amantiwari1]

@vasturiano forget mention

[vasturiano]

@amantiwari1 thanks for creating the example. The behavior seems correct to me. You should keep in mind that when you assign a value to a middle (non-leaf) node, that represents the (self) amount that it has, not accounting for its children. Essentially that portion will be shown empty without any children. The children's portion is automatically computed by the component, to be mathematically correct.

So, in your example above, if a node has a self value of 6.1 and its children also sum up to 6.1, it will be shown half with children and half without. Hope that makes sense.

[amantiwari1]

Great, I got it, my question is how to do stuff with node before rendering a new chart?

[vasturiano]

Can you elaborate on your question?

[amantiwari1]

I have to get node data before rendering the new sunburst for example for the first enter website to show charts without table then user tap any layer to get node data to add table but refresh and enter the website is not getting node data with no showing table, I have tried

also in Mouse Leave is not getting null once mouse leave so fast with half-width in size charts

in full width, it is working to get null and in half-width, I am not getting null once the mouse leave

[vasturiano]

@amantiwari1 I'm not totally following. Are you referring to a specific application that is using this module? Perhaps an example would help to clarify.

[amantiwari1]

example - https://drivestats.io/view/?id=XXF3PMQCFAWMF42GF0PWKFVMTM#root if you visit that website then it will show table automatic my website won't show table after visit my website that's problem it is working fine in shows table data in onClick and onHover

there is something call init or mounted or useEffect

[vasturiano]

@amantiwari1 that example is opaque and doesn't include any code, so it's difficult to understand if or what is not behaving as expected. Can you put something on codepen and describe with a bit more detail what your expectation is?

[amantiwari1]

Note- this is not a bug, this question is only how did they do?

That website -

1. visit website > show table (_dataNode) > show sunburst - work fine
2. click node - change table - works fine
3. hover node - change table - works fine

My website -

1. visit website > show table (_dataNode - no working) > show sunburst - no working due to there is no datanode because it need by focusOnNode() as well as table
2. click node - change table - works fine
3. hover node - change table - works fine

For above I did manage 2,3

In 1. I can't find out how to get a datanode for add table with mycharts.focusOnNode(d) after visiting the website But my normal data won't work because there is no 1_datanode1

If I got data node then I can add data and show the table after visiting the website

On my website after the visit then it said no table data like empty due to I can't find out how to data with data node

After visiting the website the user can tap click or hover then it will show a table because OnClick and onHover managed to get datanode just like node => ...

My question how did that website manage to get datanode and show table after visit website

[amantiwari1]

i found out to get datanode by using const datanode = this.mycharts.data()

but it gave me undefined by datanode.__dataNode

it is showing in console __dataNode any solution

[vasturiano]

@amantiwari1 the __dataNode attribute in each of the data items only gets populated when the chart is rendered. So if you need it to render the table or any other external component, I'd suggest to wait until the chart is rendered initially before reaching for this attribute.

[amantiwari1]

i didn't get dataNode after chart is rendered and read comment below

      this.myCharts = Sunburst()
        .data(this.billingData)
        .onHover(this.onBreadCumbChange)
        .onClick(this.onBreadCumbClick)
        .color((d, parent) => color(parent ? parent.data.name : null))
        .radiusScaleExponent(1)(
        document.getElementById("sun-brust-cost-breakdown")
      );

      const data = this.myCharts.data();
      console.log(data) // I saw there is `__dataNode`
      // not working because result __dataNode is undefined
      this.onAddTable(data.__dataNode);

[vasturiano]

@amantiwari1 initial rendering of graph is performed asynchronously, so you need to release the main thread before those attributes appear in the data. You can do that using setTimeout (with 0 delay):

const myChart = Sunburst()
  (myDomNode)
  .data(myData)
  ...
  ;

setTimeout(() => {
  console.log(myData.__dataNode);
})

[amantiwari1]

WOW, You are awesome and helpful, it works!!! @vasturiano Thanks!!!