D3 data binding

Hello everyone ,
I am now working on the first project data visualization projects .
I had a problem with data binding with D3.js . I initialized an empty array then fetched the data from the endpoint . As I try to append rect elements to the svg , nothing happens . When I log the array on the console , I see it filled with the data but I can’t bind it . Strangely , when I type random values manually in the array , they get binded .
Here is the pen : https://codepen.io/malekhammou/pen/ZEEMJjN
I am looking forward for your help and explanations .
Regards !


That’s right, because the scope when the dataset is filled is different than the one it’s defined. The right way would be to create svg inside the last .then() or define a function previously and pass that function to the last .then().

d3.json(url).then((response) => {
  // Create the SVG here.
1 Like

It may not be clear enough…

When You request data to a server, this request takes times to respond, which is why the dataset is not filled when you enter to the dataset. If the server response is fast enough it may get filled, but this might be impossible to achieve.

1 Like

Thank you very much , it solved my problem !
High regards

1 Like