Incorporating D3's library functions into Rxjs for seamless integration with Observables

Question

Incorporating D3's library functions into Rxjs for seamless integration with Observables

I'm really struggling with this concept and could use some guidance. My goal is to monitor when data is fetched, but I seem to have confused the process. Here's what I've tried so far: Using d3.tsv for an ajax request.

var test = Rx.Observable.just(
    d3.tsv("https://gist.githubusercontent.com/mbostock/3885304/raw/37bd91278846c053188a130a01770cddff023590/data.tsv", 
        function(d) {
          return {
            letter: d.letter,
            frequency: +d.frequency
          };
        }, 
        function(error, rows) {
          console.log('mytest2',rows);
        }
    )
);

var observer = Rx.Observer.create(
  function (x) { console.log('onNext: %s', x); },
  function (e) { console.log('onError: %s', e); },
  function () { console.log('onCompleted'); });

var subscription = test.subscribe(observer);

Although the ajax request technically works, all of the Observable functions occur before the data actually arrives. How can I set it up so that my 'onNext' log displays the data, rather than only receiving it inside the d3.tsv function?

javascript ajax d3.js observable rxjs

Answer 1

Answer №1

When dealing with two callbacks for success and result, the standard RxJS operators like .fromCallback and .fromNodeCallback may not be suitable. In such cases, a custom helper function can be used instead. Here's an example:

function d3fn (url, success_handler, error_handler) {
  success_handler ({
    letter : 'letter',
    frequency : 9
  });
}

var d3 = {tsv : d3fn};

function fromD3Callback (d3fn, ctx) {
return function () {
  var args = Array.prototype.slice.call(arguments);
  var subject = new Rx.AsyncSubject();

  function success_handler () {
    subject.onNext.apply(subject, Array.prototype.slice.call(arguments));
    subject.onCompleted();
  }

  function error_handler () {
    subject.onError(Array.prototype.slice.call(arguments));
  }

  args.push(success_handler);
  args.push(error_handler);

  d3fn.apply(ctx, args);
  return subject.asObservable();
}
}

var test = fromD3Callback(d3.tsv)("https://gist.githubusercontent.com/mbostock/3885304/raw/37bd91278846c053188a130a01770cddff023590/data.tsv")
  .map(function(d) {
          return {
            letter: d.letter,
            frequency: +d.frequency
          };
        })
  .catch(function(error, rows) {
          console.log('mytest2',rows);
          return Rx.Observable.throw({error: error, rows: rows});
        });

var observer = Rx.Observer.create(
  function (x) { console.log('onNext: %o', x); },
  function (e) { console.log('onError: %s', e); },
  function () { console.log('onCompleted'); });

var subscription = test.subscribe(observer);

Answer 2

When dealing with two callbacks for success and result, the standard RxJS operators like .fromCallback and .fromNodeCallback may not be suitable. In such cases, a custom helper function can be used instead. Here's an example:

function d3fn (url, success_handler, error_handler) {
  success_handler ({
    letter : 'letter',
    frequency : 9
  });
}

var d3 = {tsv : d3fn};

function fromD3Callback (d3fn, ctx) {
return function () {
  var args = Array.prototype.slice.call(arguments);
  var subject = new Rx.AsyncSubject();

  function success_handler () {
    subject.onNext.apply(subject, Array.prototype.slice.call(arguments));
    subject.onCompleted();
  }

  function error_handler () {
    subject.onError(Array.prototype.slice.call(arguments));
  }

  args.push(success_handler);
  args.push(error_handler);

  d3fn.apply(ctx, args);
  return subject.asObservable();
}
}

var test = fromD3Callback(d3.tsv)("https://gist.githubusercontent.com/mbostock/3885304/raw/37bd91278846c053188a130a01770cddff023590/data.tsv")
  .map(function(d) {
          return {
            letter: d.letter,
            frequency: +d.frequency
          };
        })
  .catch(function(error, rows) {
          console.log('mytest2',rows);
          return Rx.Observable.throw({error: error, rows: rows});
        });

var observer = Rx.Observer.create(
  function (x) { console.log('onNext: %o', x); },
  function (e) { console.log('onError: %s', e); },
  function () { console.log('onCompleted'); });

var subscription = test.subscribe(observer);

Answer 3

Answer №2

After some research, I managed to find a solution to my issue. However, I believe there might be a more efficient way to approach it. Here's what I've come up with so far:

var url = "https://gist.githubusercontent.com/mbostock/3885304/raw/37bd91278846c053188a130a01770cddff023590/data.tsv"

var fetch = Rx.Observable.fromNodeCallback(d3.tsv);

var source = fetch(url, function(d) {
  return {
    letter: d.letter,
    frequency: +d.frequency
  };
})

var observer = Rx.Observer.create(
  function (o) {
        console.log('Next: success!', o);
    },
    function (err) {
        console.log('Error: ' + err);
    },
    function () {
        console.log('Completed');
    });

var subscription = source.subscribe(observer);

One challenge I'm facing is implementing filtering based on this code snippet. Any suggestions for an improved approach would be greatly appreciated.

Answer 4

After some research, I managed to find a solution to my issue. However, I believe there might be a more efficient way to approach it. Here's what I've come up with so far:

var url = "https://gist.githubusercontent.com/mbostock/3885304/raw/37bd91278846c053188a130a01770cddff023590/data.tsv"

var fetch = Rx.Observable.fromNodeCallback(d3.tsv);

var source = fetch(url, function(d) {
  return {
    letter: d.letter,
    frequency: +d.frequency
  };
})

var observer = Rx.Observer.create(
  function (o) {
        console.log('Next: success!', o);
    },
    function (err) {
        console.log('Error: ' + err);
    },
    function () {
        console.log('Completed');
    });

var subscription = source.subscribe(observer);

One challenge I'm facing is implementing filtering based on this code snippet. Any suggestions for an improved approach would be greatly appreciated.

Incorporating D3's library functions into Rxjs for seamless integration with Observables

Answer №1

Answer №2

Similar questions

Retrieve the content of a different page and store it as a variable using ajax

Why do certain servers encounter the "Uncaught SyntaxError: Unexpected token ILLEGAL" error when loading external resources like Google Analytics or fonts from fonts.com?

Obtaining the initial row information from jqGrid

Discover the hidden truth: Unveiling the enigma of React

Using AJAX to delete items from the personalized shopping cart on your WooCommerce website

When transitioning to an object, Vue.js fails to refresh

Leveraging JavaScript for Validating Radio Buttons

How can I enable a button in a React application when the text input is not populating

MySQL field being updated upon page unload

Interact with HTML style attribute using JavaScript

Delay in form submission

Display the length of an array using AngularJS

Tips for creating a personalized dialog box after logging in with React Admin based on the server's response

Tips on extracting the image URL after uploading via Google Picker

Capturing information within a jQuery function by accessing data from another function

Elements are not detected after applying display:none

Edit the contents within HTML strings without altering the HTML structure

How come I am unable to reach the window in my Next.js application's '_app.js' file?

Refreshing CSS-Element-Queries following an ajax request

Convert the existing jQuery function to Angular 9 syntax