Code within d3.json() callback is not executed

by

The signature of d3.json has changed from D3 v4 to v5. It has been moved from the now deprecated module d3-request to the new d3-fetch module. As of v5 D3 uses the Fetch API in favor of the older XMLHttpRequest and has in turn adopted the use of Promises to handle those asynchronous requests.

The second argument to d3.json() no longer is the callback handling the request but an optional RequestInit object. d3.json() will now return a Promise you can handle in its .then() method.

Your code thus becomes:

d3.json("/trip_animate/tripData.geojson")
  .then(function(data){
    // Code from your callback goes here...
  });

Error handling of the call has also changed with the introduction of the Fetch API. Versions prior to v5 used the first parameter of the callback passed to d3.json() to handle errors:

d3.json(url, function(error, data) { 
  if (error) throw error;
  // Normal handling beyond this point.
});

Since D3 v5 the promise returned by d3.json() will be rejected if an error is encountered. Hence, vanilla JS methods of handling those rejections can be applied:

  1. Pass a rejection handler as the second argument to .then(onFulfilled, onRejected).

  2. Use .catch(onRejected) to add a rejection handler to the promise.

Applying the second solution your code thus becomes

d3.json("/trip_animate/tripData.geojson")
  .then(function(data) {
    // Code from your callback goes here...
  })
  .catch(function(error) {
    // Do some error handling.
  });

More Related Contents:

  1. Selecting null: what is the reason behind selectAll(null) in D3?
  2. How to load data from a CSV file in D3 v5
  3. Cannot use attr with an object in D3 v4
  4. Highlight selected node, its links, and its children in a D3 force directed graph
  5. How can I bring a circle to the front with d3?
  6. How do I include newlines in labels in D3 charts?
  7. Retrieve DOM target from drag callback when `this` is not available
  8. Resize svg when window is resized in d3.js
  9. Invoke a callback at the end of a transition
  10. Updating SVG Element Z-Index With D3
  11. D3 Appending Text to a SVG Rectangle
  12. How do you create a family tree in d3.js?
  13. Is there a way to tell crossfilter to treat elements of array as separate records instead of treating whole array as single key?
  14. D3js – change Vertical bar chart to Horizontal bar chart
  15. In d3, how to get the interpolated line data from a SVG line?
  16. Creating and appending detached elements with d3.create
  17. D3js take data from an array instead of a file
  18. Wrapping Text in D3
  19. D3 fill shape with image using pattern
  20. Initial Range selection in DC.js chart
  21. How to use x and width in a bar chart with scaleTime?
  22. d3 js – loading json without a http get
  23. Setting rounded corners for svg:image
  24. svg / d3.js rounded corners on one side of a rectangle
  25. Adding new nodes to Force-directed layout
  26. How do I return y coordinate of a path in d3.js?
  27. Dynamically resize the d3 tree layout based on number of childnodes
  28. Can’t make paths draw growing slowly with D3
  29. d3 sankey charts – manually position node along x axis
  30. clicking a node in d3 from a button outside the svg

Leave a Comment