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

What is the best way to tile textures in Three.js without causing distortion?

Submitting an AJAX request to upload an XML file and an image file simultaneously in one call

The use of multiple Where clauses in a Firestore Firebase query is not functioning as expected when implemented in JavaScript code

How does express.route determine the route?

When the onClick event is triggered, my intention is to dynamically insert a new

The tweet button is not displaying correctly on the website

Is it possible to utilize the System.import or import() function for any JavaScript file, or is it restricted to single module-specific files?

Ways to combine and run the outcomes of several functions with Lodash

Using React to create multiple modals and dynamically passing props

What is the best way to retrieve information from an Array within a JSON Object?

How come require() doesn't resolve the image path when passed as a prop in NuxtJS?

An unexpected token was discovered by Jest: export { default as v1 } when using uuid

What's the reason for this Ajax request taking such a long time to display on the

Mobile Image Gallery by Adobe Edge

Tips for maintaining circular references when converting a JavaScript object to JSON string format

Is there a way to verify an email address and transfer form data to a different HTML page for printing?

How to properly size a child div inside a parent container

Retrieve Vue.js component property within an Ajax function

Maximum number of days that can be selected with Bootstrap Datepicker

Tapping on the invisible picture