D3 data binding seem to be behave differently when using the original data object, vs. using a cloned version of the data object. I have a function updateTable which updates an array of tables based on the passed array of arrays. If an array (representing one new table row) is added to the array of arrays, and passed to the updateFunction, all works as expected (the row is added to the table). If however, we make a shallow copy (clone) of this data structure and pass it to the updateFunction, the data binding fails and no table row is added. Please note that the original data structure and clone are two different objects, however with identical values.
Please see this JSFiddle example. Two tables are generated, one fed the original data, the other the cloned data. The two tables are clearly different, as the second table (built using cloned data) does NOT contain the third row.
'use strict';
d3.select("body").append("h3").text("D3 Data Binding Issue");
// create two divs to hold one table each
var tableDiv1 = d3.select("body").append("div");
d3.select("body").append("hr");
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);
// 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 div(s)
divs.exit().remove();
// add new div(s)
var divsEnter = divs.enter().append("div");
// append header(s) in new div(s)
divsEnter.append("h4").text(title);
// append table(s) in new div(s)
var tableEnter = divsEnter.append("table")
.attr("id", function(d) { return d.table });
// append table body in new table(s)
tableEnter.append("tbody");
// select all tr elements in the divs update selection
var tr = divs.selectAll("table").selectAll("tbody").selectAll("tr")
.data(function(d, i, a) { return d.rows; }, function(d, i, a) { return d.row; }); // disable by-index eval
// remove any row(s) with missing data array(s)
tr.exit().remove();
// add row(s) for new data array(s)
tr.enter().append("tr");
// bind data to table cells
var td = tr.selectAll("td")
.data(function(d, i) { return d3.values(d); });
// add new cells
td.enter().append("td");
// update contents of table cells
td.text(function(d) { return d; });
}
// source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
function clone(objectToBeCloned) {
return JSON.parse(JSON.stringify(objectToBeCloned));
}
Can anybody shed some light on this behavior? I believe I'm using the key functions properly, but could be wrong. In my application I need to re-generate the data structure before each table update, and I don't have option of reusing the original object.
The root of the problem is that you have a nested structure and .selectAll() doesn't update the data bound to the elements (but .append() automatically "inherits" the data). So the data that you use to render the table is simply not updated -- you can fix this by using .select() instead of .selectAll() (see the updated example).
The subtle difference between .select() and .selectAll() is that the former (similar to .append()) "inherits" the data bound to the elements in the current selection to the newly selected elements, while .selectAll() does not.
So why does it work for the original data? Well, D3 doesn't copy the data when it binds it to an element, but references it. By modifying the original data, you're also modifying what's bound to the elements. Hence simply running the code without rebinding any data works. The cloned data isn't updated as you're not modifying it directly.
Actually, the problem is due to an anti-pattern that you are using to "muscle" the tr structure.
The problem
During the second pass through tableUpdate, the key function finds a match on d.table for both the original and the un-cloned data. This is because the key is converted to a string during the binding process so even though
d.table === data.table; // false
it's still a match because
d.table == data.table; // true
Therefore the enter selection is empty in both cases and all of this code
var divsEnter = divs.enter().append("div");
// append header(s) in new div(s)
divsEnter.append("h4").text(title);
// append table(s) in new div(s)
var tableEnter = divsEnter.append("table")
.attr("id", function(d) { return d.table });
// append table body in new table(s)
tableEnter.append("tbody");
does nothing.
So the original data is not re-bound and the new, cloned data is not bound. But...
the data bound to the first table now has three rows because, as Lars pointed out, it is bound by reference. so, for the first table,
divs.datum() === data; // true
and it now has three rows.
In the case of the cloned data, the key function also returns true because you haven't changed it. Even though it has an extra row, data.key is still "Table1". So you are telling the key function that it's the same table. Consequently, the enter selection is also empty so, the new, cloned data is also not bound so, for the second table,
divs.datum() === data; // false
d.table == data.table == "Table1" // um, true true
and it still has two rows.
The problem is you use an an anti-pattern to bind the data and build the tr elements.
Instead of selecting and binding the data following the hierarchy of it's structure, you go off piste and go back to the div and just ram it down to the tr element to build the structure. This is dangerous because the returned tr elements are unqualified, none of the important context that you gained from carefully selecting/creating the correct tbody element is used to ensure that these are the correct tr elements, they are in fact, whatever tr elements that happen to be laying around - regardless of which table they belong to - inside the div.
In both cases you simply rebuild the tr elements using the original arrays that are still attached, which is fine for the first table but for the second one... not so much.
My "current theory" of best practice is to build your data structure to model the intended structure of your visualisation first and then construct the DOM elements by walking that data structure, binding at each level and kicking the remaining data ahead of you as you go, until finally, it's all bound.
The solution
You need to be truly "data driven" and strictly follow the data structure when building and binding your elements. I re-built your updateTable function below...
'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 div(s)
divs.exit().remove();
// add new div(s)
var divsEnter = divs.enter().append("div");
// append header(s) in new div(s)
divsEnter.append("h4").text(title);
// append or replace table(s) in new div(s)
var table = divs.selectAll("table")
.data(function (d) {
// the 1st dimension determines the number of elements
// this needs to be 1 (one table)
return [d.rows];
}, function (d) {
// need a unique key to diferenciate table generations
var sha256 = new jsSHA("SHA-256", "TEXT");
return (sha256.update(JSON.stringify(d)),
console.log([this.length ? "data" : "node", sha256.getHash('HEX')].join("\t")),
sha256.getHash('HEX'));
});
table.exit().remove();
// the table body will have the same data pushed down from the table
// it will also be the array of array of rows
table.enter().append("table").append("tbody");
console.log(table.enter().size() ? "new table" : "same table")
var tBody = table.selectAll("tbody");
// select all tr elements in the divs update selection
var tr = tBody.selectAll("tr")
.data(function (d, i, a) {
// return one element of the rows array
return d;
}, function (d, i, a) {
return d.row;
}); // disable by-index eval
// remove any row(s) with missing data array(s)
tr.exit().remove();
// add row(s) for new data array(s)
tr.enter().append("tr");
// bind data to table cells
var td = tr.selectAll("td")
.data(function (d, i) {
return d3.values(d);
});
// add new cells
td.enter().append("td");
// update contents of table cells
td.text(function (d) {
return d;
});
}
// source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
function clone(objectToBeCloned) {
return JSON.parse(JSON.stringify(objectToBeCloned));
}
table, th, td {
border: 1px solid gray;
}
body>div { display: inline-block; margin: 10px;}
<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>
The interesting thing(s)
The interesting thing is, that the table bound to the original data never gets replaced. The reason being that, again, as mentioned by #Lars, the data is bound by reference.
As an experiment (and inspired by my love-hate relationship with git) I used a 256 bit sha as a key, feeding the stringified data to it. If you're managing a bunch of tables in the same space then maybe this is the way to go. If you always clone the data and calculate a sha then that feels like a very secure approach.
By way of illustration, here is a redacted log (I added a second update with the same data at the start...)
This is the first pass where there are no nodes yet. The key function is only invoked once on each data element because the update selection is empty.
Are object values equal? true
data [{"table":"Table1","rows":[{"tab...,"data":"DataT1R2"}]}]
data a09a5ef8f6b81669eed13c93f609884...
new table ...
data [{"table":"Table1","rows":[{"tab...,"data":"DataT1R2"}]}]
data a09a5ef8f6b81669eed13c93f609884...
new table ...
...
This is the second call with the same data. You can see that the key function is called twice for each table and that the sha is the same for both, hence the "same table" anotation.
Are object values equal? true ...
data [{"table":"Table1","rows":[{"tab...,"data":"DataT1R2"}]}]
node a09a5ef8f6b81669eed13c93f609884...
data a09a5ef8f6b81669eed13c93f609884...
same table ...
data [{"table":"Table1","rows":[{"tab...,"data":"DataT1R2"}]}]
node a09a5ef8f6b81669eed13c93f60...
data a09a5ef8f6b81669eed13c93f60...
same table
Here is the interesting case where, even though the data has changed, the key function returns the same sha for node and data for the first table. The second table is as expected, with different sha for node and data and a new table generated.
Are object values equal? true
data [{"table":"Table1","rows":[{...,"data":"DataT1R3"}]}]
node 7954982db25aee37483face1602...
data 7954982db25aee37483face1602...
same table ...
data [{"table":"Table1","rows":[{...,"data":"DataT1R3"}]}]
node a09a5ef8f6b81669eed13c93f60...
data 7954982db25aee37483face1602...
new table
Related
I want to create a table that represents the data from a model that i have loaded in the forge viewer.
i want the table to be in a docking panel, and show the propertys for elements in the model ( level, name, comment,Area, type name--> for each element [if it has the property])
i have tried to use the API reference, and create a DataTable, but i did not find examples of how to actually impliment it.
where and when do i need to set the datatable? ( after or before creating the docking pannel?)
what is the content of the arrays that i should pass in the constructor? ( according to the documentation : array of arrays for the rows, and array for the columns. is the row array, is simply an array that contains the columns arrays?)
this is my current code for the extension that shows the amount to instances in the model for each property that i want to adjust:
'''
class testTest extends Autodesk.Viewing.Extension {
constructor(viewer, options) {
super(viewer, options);
this._group = null;
this._button = null;
}
load() {
console.log('testTest has been loaded');
return true;
}
unload() {
// Clean our UI elements if we added any
if (this._group) {
this._group.removeControl(this._button);
if (this._group.getNumberOfControls() === 0) {
this.viewer.toolbar.removeControl(this._group);
}
}
console.log('testTest has been unloaded');
return true;
}
// The Viewer contains all elements on the model, including categories (e.g. families or part definition),
//so we need to enumerate the leaf nodes, meaning actual instances on the model.
getAllLeafComponents(callback) {
this.viewer.getObjectTree(function (tree) {
let leaves = [];// an empty 'leaf' list that we want to fill wiith the objects that has no mo children
//dbId== object id
// for each child that we enumerate from a root, call a code , and finally a true /false flag parameter that run the function recursivly for all the children of a child.
tree.enumNodeChildren(tree.getRootId(), function (dbId) {
if (tree.getChildCount(dbId) === 0) {
leaves.push(dbId);// if the object has no children--> add it to the list.
}
}, true);// the last argument we past ("true") will make sure that the function in the seccond argument ("function (dbId)(...)" ")will run recursively not only for the children of the roots,
//but for all the children and childrtn's children.
callback(leaves);//return the leaves
});
}
onToolbarCreated() {
// Create a new toolbar group if it doesn't exist
this._group = this.viewer.toolbar.getControl('allMyAwesomeExtensionsToolbar');//if there is no controller named "allMyAwesomeExtensionsToolbar" create one
if (!this._group) {
this._group = new Autodesk.Viewing.UI.ControlGroup('allMyAwesomeExtensionsToolbar');
this.viewer.toolbar.addControl(this._group);// add the control to tool bar
}
// Add a new button to the toolbar group
this._button = new Autodesk.Viewing.UI.Button('testTest');
this._button.onClick = (ev) => {
// Check if the panel is created or not
if (this._panel == null) {//check if there is an instance of our pannel. if not- create one
this._panel = new ModelSummaryPanel(this.viewer, this.viewer.container, 'modelSummaryPanel', 'Model Summary');
}
// Show/hide docking panel
this._panel.setVisible(!this._panel.isVisible());//cal a method from the parent to show/ hide the panel -->use this to toggle from visible to invisible
this._panel.set
// If panel is NOT visible, exit the function
if (!this._panel.isVisible())
return;
// First, the viewer contains all elements on the model, including
// categories (e.g. families or part definition), so we need to enumerate
// the leaf nodes, meaning actual instances of the model. The following
// getAllLeafComponents function is defined at the bottom
this.getAllLeafComponents((dbIds) => {// now we have the list of the Id's of all the leaves
// Now for leaf components, let's get some properties and count occurrences of each value
debugger;
const filteredProps = ['Level','Name','Comments','Area','Type Name'];
// Get only the properties we need for the leaf dbIds
this.viewer.model.getBulkProperties(dbIds,filteredProps , (items) => {
// Iterate through the elements we found
items.forEach((item) => {
// and iterate through each property
item.properties.forEach(function (prop) {
// Use the filteredProps to store the count as a subarray
if (filteredProps[prop.displayName] === undefined)
filteredProps[prop.displayName] = {};
// Start counting: if first time finding it, set as 1, else +1
if (filteredProps[prop.displayName][prop.displayValue] === undefined)
filteredProps[prop.displayName][prop.displayValue] = 1;
else
filteredProps[prop.displayName][prop.displayValue] += 1;
});
});
// Now ready to show!
// The PropertyPanel has the .addProperty that receives the name, value
// and category, that simple! So just iterate through the list and add them
filteredProps.forEach((prop) => {
if (filteredProps[prop] === undefined) return;
Object.keys(filteredProps[prop]).forEach((val) => {
this._panel.addProperty(val, filteredProps[prop][val], prop);
this.dt = new DataTabe(this._panel);
this.dt.setData()
});
});
});
});
};
this._button.setToolTip('Or Levis extenssion');
this._button.addClass('testTest');
this._group.addControl(this._button);
}
}
Autodesk.Viewing.theExtensionManager.registerExtension('testTest', testTest);'''
'''
We have a tutorial with step-by-step on how to do it.
Please, refer to Dashboard tutorial, specifically in Data Grid section.
In this case, the tutorial uses an external library (Tabulator) to show the data.
I have a group for which elements after reduction look like this pseudocode :
{
key:"somevalue",
value: {
sum: the_total,
names:{
a: a_number,
b: b_number,
c:c_number
}
}
}
In my dc-js geoChoropleth graph the valueAccessor is (d) => d.value.sum
In my title, I would like to use the names component of my reduction. But when I use .title((d) => {...}), I can onjly access the key and the value resulting from the valueAccessor function instead of the original record.
Is that meant to be ?
This is a peculiarity of the geoChoropleth chart.
Most charts bind the group data directly to chart elements, but since the geoChoropleth chart has two sources of data, the map and the group, it binds the map data and hides the group data.
Here is the direct culprit:
_renderTitles (regionG, layerIndex, data) {
if (this.renderTitle()) {
regionG.selectAll('title').text(d => {
const key = this._getKey(layerIndex, d);
const value = data[key];
return this.title()({key: key, value: value});
});
}
}
It is creating key/value objects itself, and the value, as you deduced, comes from the valueAccessor:
_generateLayeredData () {
const data = {};
const groupAll = this.data();
for (let i = 0; i < groupAll.length; ++i) {
data[this.keyAccessor()(groupAll[i])] = this.valueAccessor()(groupAll[i]);
}
return data;
}
Sorry this is not a complete answer, but I would suggest adding a pretransition handler that replaces the titles, or alternately, using the key passed to the title accessor to lookup the data you need.
As I noted in the issue linked above, I think this is a pretty serious design bug.
I'm trying to export dc.js filtered table data using FileSaver.js.
I use the code below based on this which is fine except it export all fields (but filtered ok) whereas I would just need table specific fields which are are only a few of the fields plus 2 calculated.
d3.select('#download')
.on('click', function() {
var blob = new Blob([d3.csv.format(dateDim.top(Infinity))], {type: "text/csv;charset=utf-8"});
saveAs(blob, DateT + '.csv');
});
Is there a way I can point to the table rather that dimension?
Thanks.
EDIT: Working code below
d3.select('#download')
.on('click', function() {
var data = MYTABLEDIM.top(Infinity);
{
data = data.map(function(d) {
var row = {};
MYTABLENAME.columns().forEach(function(c) {
row[MYTABLENAME._doColumnHeaderFormat(c)] = MYTABLENAME._doColumnValueFormat(c, d);
});
return row;
});
}
var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
saveAs(blob, 'data.csv');
});
Good question.
It is actually possible to format the data according to the column definitions, by using some undocumented methods of the data table.
I've updated the example with a radio button to choose which data to download.
Here is the code that transforms and download the data as it is encoded in the table:
d3.select('#download')
.on('click', function() {
var data = nameDim.top(Infinity);
data = data.map(function(d) {
var row = {};
table.columns().forEach(function(c, i) {
// if you're using the "original method" for specifying columns,
// use i to index an array of names, instead of table._doColumnHeaderFormat(c)
row[table._doColumnHeaderFormat(c)] = table._doColumnValueFormat(c, d);
});
return row;
});
var blob = new Blob([d3.csv.format(data)], {type: "text/csv;charset=utf-8"});
saveAs(blob, 'data.csv');
});
Basically, when the table radio is selected, we'll transform the data row-by-row using the same functions that the table uses to format its data.
The rows will be in the order of the original data, not sorted like the table. (And strictly speaking, the columns may not be in the same order either). That would be a bigger endeavor, and might require new features in dc.js. But this works without any changes. Hope it helps!
I have a collection which contains several items that should be accessible in a list.
So every element in the collection gets it own view element which is then added to the DOM into one container.
My question is:
How do I apply the sort order I achieved in the collection with a comparator function to the DOM?
The first rendering is easy: you iterate through the collection and create all views which are then appended to the container element in the correct order.
But what if models get changed and are re-ordered by the collection? What if elements are added? I don't want to re-render ALL elements but rather update/move only the necessary DOM nodes.
model add
The path where elements are added is rather simple, as you get the index in the options when a model gets added to a collection. This index is the sorted index, based on that if you have a straightforward view, it should be easy to insert your view at a certain index.
sort attribute change
This one is a bit tricky, and I don't have an answer handy (and I've struggled with this at times as well) because the collection doesn't automatically reshuffle its order after you change an attribute the model got sorted on when you initially added it.
from the backbone docs:
Collections with comparator functions will not automatically re-sort
if you later change model attributes, so you may wish to call sort
after changing model attributes that would affect the order.
so if you call sort on a collection it will trigger a reset event which you can hook into to trigger a redraw of the whole list.
It's highly ineffective when dealing with lists that are fairly long and can seriously reduce user experience or even induce hangs
So the few things you get walking away from this is knowing you can:
always find the index of a model after sorting by calling collection.indexOf(model)
get the index of a model from an add event (3rd argument)
Edit:
After thinking about if for a bit I came up with something like this:
var Model = Backbone.Model.extend({
initialize: function () {
this.bind('change:name', this.onChangeName, this);
},
onChangeName: function ()
{
var index, newIndex;
index = this.collection.indexOf(this);
this.collection.sort({silent: true});
newIndex = this.collection.indexOf(this);
if (index !== newIndex)
{
this.trigger('reindex', newIndex);
// or
// this.collection.trigger('reindex', this, newIndex);
}
}
});
and then in your view you could listen to
var View = Backbone.View.extend({
initialize: function () {
this.model.bind('reindex', this.onReindex, this);
},
onReindex: function (newIndex)
{
// execute some code that puts the view in the right place ilke
$("ul li").eq(newIndex).after(this.$el);
}
});
Thanks Vincent for an awesome solution. There's however a problem with the moving of the element, depending on which direction the reindexed element is moving. If it's moving down, the index of the new location doesn't match the index of what's in the DOM. This fixes it:
var Model = Backbone.Model.extend({
initialize: function () {
this.bind('change:name', this.onChangeName, this);
},
onChangeName: function () {
var fromIndex, toIndex;
fromIndex = this.collection.indexOf(this);
this.collection.sort({silent: true});
toIndex = this.collection.indexOf(this);
if (fromIndex !== toIndex)
{
this.trigger('reindex', fromIndex, toIndex);
// or
// this.collection.trigger('reindex', this, fromIndex, toIndex);
}
}
});
And the example listening part:
var View = Backbone.View.extend({
initialize: function () {
this.model.bind('reindex', this.onReindex, this);
},
onReindex: function (fromIndex, toIndex) {
var $movingEl, $replacingEl;
$movingEl = this.$el;
$replacingEl = $("ul li").eq(newIndex);
if (fromIndex < toIndex) {
$replacingEl.after($movingEl);
} else {
$replacingEl.before($movingEl);
}
}
});
I am trying to access an object with form data sent to my controller. However, when I try to access objects I get values of null or 0. I used two methods, the first by serializing and the second by storing names and values in one object. (the code below sends/posts serialized)
Here is my JS...
$("#createUser").click(function() {
//store input values
var inputs = $('#newUserForm :input');
var input = $('#newUserForm :input').serializeArray();
console.log(input);
//if I want just the values in one object
var values = {};
$(inputs).each(function() {
values[this.name] = $(this).val();
});
console.log(values);
if(LiveValidation.massValidate( validObj )){
$.post('./adminPanel/createUser', function(input){
alert('Load was performed.');
//test confirmation box
$("#msgbox").html("Grrrrreat");
//drop down confirmation
$("#msgbox").slideDown();
});
} else {
//test fail box
$("#failbox").html("Fail");
$("#failbox").slideDown();
}
});
In the controller side I try to access data the following way...
$this->input->post("firstName")
where firstName is the name of the field.
Below is an image of the objects passed.
Top being serialized array and the bottom a single object with all the names and values of form...
If you're using jQuery, you can use jQuery's built in serialize/query string functions to get the data from a form: http://api.jquery.com/serialize/
In your case:
var data = $('#newUserForm').serialize(); // is a string like "firstName=jon"