Tags
Assume that you have a table with the ID entries
and some data to fill the table in.
testdata = [ { "name": "FEF talk", "setlength": 26, "setupdated": 1416993386.312, "setcreated": 1418404269.312, }, { "name": "Crossing the Bright Void", "setlength": 1965, "setupdated": 1419542176.312, "setcreated": 1339072018.312, }, { "name": "Definitely Not A Test Entry", "setlength": 1, "setupdated": 1366405260.127, "setcreated": 1334816591.312, }, { "name": "Lorem ipsum dolor sit amet", "setlength": 33, "setupdated": 1416993386.312, "setcreated": 1413133869.312, } ]
You want to make the table have one row per Object, with the columns being “Name”, “Length”, “Updated date”, and “Created date”.
It seems like this code should work…
var UpdateDOM, init, testdata; testdata = [{ "name": "FEF talk", "setlength": 26, "setupdated": 1416993386.312, "setcreated": 1418404269.312 }, { "name": "Crossing the Bright Void", "setlength": 1965, "setupdated": 1419542176.312, "setcreated": 1339072018.312 }, { "name": "Definitely Not A Test Entry", "setlength": 1, "setupdated": 1366405260.127, "setcreated": 1334816591.312 }, { "name": "Lorem ipsum dolor sit amet", "setlength": 33, "setupdated": 1416993386.312, "setcreated": 1413133869.312 }]; init = function () { return UpdateDOM(testdata); }; UpdateDOM = function (data) { var table; table = d3.select("#entries"); return table.selectAll("tr").data(data).enter() .append("tr") .attr("class", "entry") .selectAll("td") .data(function (d, i) { return d;}).enter() .append("td").... ?? }; init();
But then you realize that objects don’t work nicely with the selection. d3 works on the assumption that your data is an array somehow. For example, if you have an array of ten elements, then it binds each element to whatever you’re appending, be it a <p>
, <td>
, or <tr>
. Dicts/objects/associative arrays can’t be as easily be bound to elements–which part of a <td>
becomes the key, and which part becomes the value?
To solve this, d3 has a function called d3.entries()
, described here. In short, it turns your dictionary into an array of objects, each object containing a key and value pair. You can preserve key and value relationships, and even ensure the order of the keys are always the same.
Here is a link to a JSFiddle demonstrating the function, and below is the code for UpdateDOM()
.
var UpdateDOM, init, testdata; testdata = [{ "name": "FEF talk", "setlength": 26, "setupdated": 1416993386.312, "setcreated": 1418404269.312 }, { "name": "Crossing the Bright Void", "setlength": 1965, "setupdated": 1419542176.312, "setcreated": 1339072018.312 }, { "name": "Definitely Not A Test Entry", "setlength": 1, "setupdated": 1366405260.127, "setcreated": 1334816591.312 }, { "name": "Lorem ipsum dolor sit amet", "setlength": 33, "setupdated": 1416993386.312, "setcreated": 1413133869.312 }]; init = function () { return UpdateDOM(testdata); }; UpdateDOM = function (data) { var table; table = d3.select("#entries"); return table.selectAll("tr").data(data) .enter() .append("tr") .attr("class", "entry") .selectAll("td") .data(function (d, i) { return d3.entries(d);}) .enter().append("td") .attr("class", function (d) { return d.key;}) .text(function (d) { return d.value;}); }; init();