JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.0.1/sha.js"></script>

CSS

table, th, td {
        border: 1px solid gray;
    }
body>div { display: inline-block; margin: 10px;}

JavaScript

'use strict';

d3.select("body").append("h3").text("D3 Data Binding Issue").style({margin:0});

// create two divs to hold one table each
var tableDiv1 = d3.select("body").append("div");
var tableDiv2 = d3.select("body").append("div");

// define data
// here, an array of a single item (which represents a table), containing an array of arrays, 
// each destined for a table row
var data = [{
    table: "Table1",
    rows: [{
        table: "Table1",
        row: "Row1",
        data: "DataT1R1"
    }, {
        table: "Table1",
        row: "Row2",
        data: "DataT1R2"
    }]
}];

// run update on the initial data
update(data);
update(data);

// add 3rd array to the data structure (which should add a third row in each table)
data[0].rows.push({
    table: "Table1",
    row: "Row3",
    data: "DataT1R3"
});

// run update again
// observe that the Lower table (which is using cloned data) does NOT update
update(data);

/*
// remove first array of the data structure
data[0].rows.shift();

// run update again
// observe that the Lower table (which again is using cloned data) does NOT update
update(data);
*/

// function to run the tableUpdate function targeting two different divs, one with the 
// original data, and the other with cloned data
function update(data) {
    // the contents of the two data structures are equal
    console.log("\nAre object values equal? ", JSON.stringify(data) == JSON.stringify(clone(data)));

    tableUpdate(data, tableDiv1, "Using Original Data"); // update first table
    tableUpdate(clone(data), tableDiv2, "Using Cloned Data"); // update second table
}

// generic function to manage array of tables (in this simple example only one table is managed)
function tableUpdate(data, tableDiv, title) {
    console.log("data", JSON.stringify(data));

    // get all divs in this table div 
    var divs = tableDiv.selectAll("div")
        .data(data, function (d) {
        return d.table
    }); // disable default by-index eval

    // remove...