D3 Examples - D3 v3 Enter Update Exit Phases (RXJS)

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.8/rx.all.js"></script>
  <style></style>
</head>
​
<body>
  <script>
var scale = d3.scale.linear()
    .domain([1, 5])   // Data space
    .range([0, 200]); // Pixel space
​
var svg = d3.select("body").append("svg")
    .attr("width", 250)
    .attr("height", 250);
​
function render(data, color) {
    var rects = svg.selectAll("rect").data(data);
​
    // Enter
    rects.enter().append("rect")
        .attr("y", 50)
        .attr("width", 20)
        .attr("height", 20);
​
    // Update
    rects
        .attr("x", scale)
        .attr("fill", color);
​
    // Exit
    rects.exit().remove();
​
}
​
var dataSource = Rx.Observable.create(function (observer) {
​
    function tryCatchSet(value) {
        try {
            observer.onNext(value);
        } catch (error) {
            observer.onError(error);
        }
    }
​
    var t1 = setTimeout(function () {
        tryCatchSet({ values: [1, 2, 2.5], color: "red" });
    }, 1000);
    var t2 = setTimeout(function () {
        tryCatchSet({ values: [1, 2, 3, 4, 5], color: "blue" });
    }, 2000);
    var t3 = setTimeout(function () {
        tryCatchSet({ values: [1, 2], color: "green" });
    }, 3000);
    var t4 = setTimeout(function () {
        tryCatchSet({ values: [3, 4, 5], color: "cyan" });
    }, 4000);
    var t5 = setTimeout(function () {
        tryCatchSet({ values: [4, 5], color: "magenta" });
    }, 5000);
​
    return function () {
        console.log('disposal called - data teardown');
        clearTimeout(t1);
        clearTimeout(t2);
        clearTimeout(t3);
        clearTimeout(t4);
        clearTimeout(t5);
    };
});
​
var sub = dataSource.subscribe(function (data) {
    render(data.values, data.color);
}, function (err) {
    console.log("Sorry I got error")
}, function () {
    console.log("Done with the data updates");
});
​
    
  </script>
</body>
​
    