0

How to calculate the dy and width value dynamically? if the tree strcture changes every time.

code Used

below width will suit for the provided Json for a demo purpose. dy = 154.66666666666666 width = 928

but if the json dynamically? and the same code doesnt work for below json JSON:

{
  "name": "flare",
  "children": [
    {
      "name": "analytics",
      "children": [
        {
          "name": "cluster",
          "children": [
            {
              "name": "AgglomerativeCluster",
              "children": [
                {
                  "name": 1,
                  "children": [
                    {
                      "name": 2,
                      "children": [
                        {
                          "name": 3,
                          "children": [
                            {
                              "name": 4,
                              "children": [
                                {
                                  "name": 5,
                                  "children": [
                                    {
                                      "name": 6,
                                      "value": 6
                                    }
                                  ],
                                  "value": 5
                                }
                              ],
                              "value": 4
                            }
                          ],
                          "value": 3
                        }
                      ],
                      "value": 2
                    }
                  ],
                  "value": 1
                }
              ],
              "value": 3938
            }
          ]
        }
      ]
    }
  ]
}

need a help to calculate width and dy dynamically..

nontechguy
  • 751
  • 5
  • 21
Rashmitha N K
  • 1
  • 3
  • I have been looking for a solution for this too. It seems not possible to set the chart's width based on the amount of data. You have to set the width beforehand. – Kokodoko Nov 23 '21 at 11:22
  • thanks looking for solution not sure how we can fix this. – Rashmitha N K Nov 23 '21 at 11:29
  • The only solution I found was to parse the data beforehand and guess how wide the chart will need to be for that data. – Kokodoko Nov 23 '21 at 12:07
  • is it hit and trial or based on some depth we can give width? – Rashmitha N K Nov 23 '21 at 12:47
  • That totally depends on the type of D3 chart and the shape of the data. In my case I drew a Tree chart so I had to count the amount of branches in the data. I guessed that every level needed about 300 pixels ... But there should be a better way! – Kokodoko Nov 23 '21 at 14:03
  • `dy = width / 6` in the linked example. 6 is the the max depth of the array in the example. Make that dynamic based on the max depth of the array. – SmokeyShakers Nov 23 '21 at 14:17
  • @SmokeyShakers i have given try, instead of 6 tried to provide depth of the tree but mean time static width also should be changed.. but i am struck there. – Rashmitha N K Nov 23 '21 at 15:50
  • @Kokodoko ya i am trying to d3 tree chart only minimum SVG width i have taken as window size. and tried to increase by some amount.. but this is not better approach. – Rashmitha N K Nov 23 '21 at 15:53
  • Your `dy` and `width` are not independent. One is a function of the other. You could write width as `width = dy * n` where `n` is the max depth. – SmokeyShakers Nov 23 '21 at 16:05

0 Answers0