D3 v3 Enter Update Exit Phases (RXJS)

Enter Update Exit Phases D3 v3 (RxJS)

Just exercise with Observable

v3 - entering elems implicitly included in the update selection.
v4 - merge() function for that
Update does not have a named method, but is an operation performed on the existing data.

Thinking with Joins

forked from uicoded's block: D3 v3 Enter Update Exit Phases

<!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);
        }
    }

return function () {
        console.log('disposal called - data teardown');
        clearTimeout(t1);
        clearTimeout(t2);
        clearTimeout(t3);
        clearTimeout(t4);
        clearTimeout(t5);
    };
});

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.8/rx.all.js