How to update the grid when 2D brushing is applied?

[TharinduDR]

Is there a way to update the grid when the 2D brushing is used? right now I am using this method to update the grid, but it doesn't work for 2D brushing, it works only for 1D brushing.
parcoords.on("brush", function(d) {
gridUpdate(d);
});

[bbroeksema]

Try using brushend in stead of brush. Currently the 2D brush doesn’t emit a brush on each change. This is to avoid costly calculations.

[TharinduDR]

@bbroeksema Thanks, but when I use this function,
parcoords.on("brushend", function(d) {
gridUpdate(d);
});
2D brush won't reset when I click elsewhere between the axes. see the images,

when I click elsewhere between the axes to disable brushing it wont show updated data,

[bbroeksema]

@TharinduDR First of all: does that actually update the table for you when brushing? That is, does the table content reflect the brushed items once you have finished placing a strum? (This would mean we at least solved part of the problem).

Secondly, I'm not sure if I understand correctly from the pictures what your problem is. Is it the case that when you remove a strum, the pcp still only shows the items that where brushed when the strum was still there? The pictures do look different to me.

Thirdly: can you try two things (one at a time):

1. Instead of

parcoords.on("brushend", function(d) { ...

try:

parcoords.on("brushend.test", function(d) { ...

1. Can you swap the order of those two lines:

https://github.com/syntagmatic/parallel-coordinates/blob/ec0012151725446bf93d819838b37f74c3169431/d3.parcoords.js#L1036-1037

in your copy of d3.parcoords.js?

Let me know if this solves your problem. If not, I'd have to look into it, but for that I would need a minimal example showing the issue.

[TharinduDR]

@bbroeksema Thank you very much for the quick reply. When I changed brushend instead of brushed, table content reflected the brushed items once I have finished placing a strum.(Yes so we have solved a part of the problem)
The problem as you have told, when I remove a strum, the pcp still only shows the items that were brushed when the strum was still there. Swapping those two lines solved that problem.(trying parcoords.on("brushend.test", function(d) didn't solve). But a new problem was introduced.
This time when I remove a strum, the grid still only shows the items that were brushed when the strum was still there. Basically table won't update when I remove a strum. With the pictures,

1. The very initial picture. Grid shows all the items(check the ID column)
   
2. After placing a strum. Grid is updated and it shows only brushed items.

1. After removing the strum pcp shows all the items, but the grid shows only the items that were brushed when the strum was there.
   

I use these functions,
parcoords.on("brushend", function(d) {
gridUpdate(d);
});

function gridUpdate(data)
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
};

an error throws from dataView.endUpdate(); when I remove the strum.
Can you please suggest a solution for this problem also?
Thank You very much.

[bbroeksema]

@TharinduDR which error is thrown from datView.endUpdate()? It seems to be an event handling issue. Did you follow/use one of the examples as the basis for your application? I guess, the slickgrid one. I'll check tomorrow if i can reproduce it.

[TharinduDR]

Yeah I have used the slickgrid example as it is. The only change I did was to change the brushMode to "2D-strums".
The error is an Uncaught TypeError which points to refresh(); in slick.dataview.js

function endUpdate() {
suspend = false;
refresh();
}

[bbroeksema]

I'll try to reproduce it, hopefully this weekend. But I'm a bit short on time so, be patient. Of course, if you figure out yourself where the error comes, from in the meantime.... I'd be more than happy to merge the fixes.

[TharinduDR]

@bbroeksema Sure. Thank you very much.

[bbroeksema]

--- a/examples/slickgrid.html
+++ b/examples/slickgrid.html
@@ -68,7 +68,7 @@ d3.csv('data/nutrients.csv', function(data) {
     .data(data)
    .render()
     .reorderable()
-    .brushMode("1D-axes");
+    .brushMode("2D-strums");

  // setting up grid
  var column_keys = d3.keys(data[0]);
@@ -137,7 +137,7 @@ d3.csv('data/nutrients.csv', function(data) {
   gridUpdate(data);

   // update grid on brush
-  parcoords.on("brush", function(d) {
+  parcoords.on("brushend", function(d) {
     gridUpdate(d);
   });

@TharinduDR I tested with above changes to example slickgrid and it worked for me with 711a115. Can you test if this solves the problem for you as well?

If it doesn't feel free to reopen.

[TharinduDR]

@bbroeksema Thank you very much it is working now