Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v2.29 multibrush and hideAxis bug #69

Closed
rvberloo opened this issue May 10, 2019 · 7 comments
Closed

v2.29 multibrush and hideAxis bug #69

rvberloo opened this issue May 10, 2019 · 7 comments
Assignees
@BigFatDog
Labels
Type: Bug

Comments

@rvberloo
Copy link

When using brushmode "1D-axes-multi" and performing a hideAxis call an error occurs in brus\1d-multi\brushreset.js

It seems properties are read in a forEach of an object (the axis that was just hidden?) that does not exist.

I modified the slickgrid example file to create a ready to use example, this example adds a button that removes three axes. This works OK for brushmode "1D-axes" but fails for "1D-axes-multi"

eg below code save as 'demo/slickgrid2.html'

<!doctype html>
<title>Linking to SlickGrid</title>

<!-- SlickGrid -->
<link rel="stylesheet" href="lib/slickgrid/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="lib/slickgrid/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="lib/slickgrid/examples.css" type="text/css"/>
<link rel="stylesheet" href="lib/slickgrid/slick.pager.css" type="text/css"/>
<script src="lib/slickgrid/jquery-1.7.min.js"></script>
<script src="lib/slickgrid/jquery.event.drag-2.0.min.js"></script>
<script src="lib/slickgrid/slick.core.js"></script>
<script src="lib/slickgrid/slick.grid.js"></script>
<script src="lib/slickgrid/slick.pager.js"></script>
<script src="lib/slickgrid/slick.dataview.js"></script>
<!-- End SlickGrid -->

<link rel="stylesheet" type="text/css" href="./parcoords.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body, html {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-size: 12px;
}
#grid, #pager {
  position: fixed;
  width: 100%;
}
#grid {
  bottom: 0;
  height: 300px;
}
#pager {
  bottom: 306px;
  height: 20px;
}
.slick-row:hover {
  font-weight: bold;
  color: #069;
}
</style>
<script src="lib/d3.v5.min.js"></script>
<script src="./parcoords.standalone.js"></script>
<script src="lib/divgrid.js"></script>
<button id="show_ext">remove axes</button>
<div id="example" class="parcoords" style="height:240px;"></div>
<div id="grid"></div>
<div id="pager"></div>
<script id="brushing">

var parcoords = ParCoords()("#example")
    .alpha(0.4)
    .mode("queue") // progressive rendering
    .height(d3.max([document.body.clientHeight-326, 220]))
    .margin({
      top: 36,
      left: 0,
      right: 0,
      bottom: 16
    });

    d3.select('#show_ext').on('click', function() {
      let hiddencolumns =['cylinders', 'power (hp)', 'year'];
      parcoords.hideAxis(hiddencolumns);
      parcoords.render().updateAxes(0);
    });


// load csv file and create the chart
d3.csv('data/cars.csv').then(function(data) {
  // slickgrid needs each data element to have an id
  data.forEach(function(d,i) { d.id = d.id || i; });

  parcoords
    .data(data)
    .hideAxis(["name"])
    .render()
    .reorderable()
    .brushMode("1D-axes-multi");

  // setting up grid
  var column_keys = d3.keys(data[0]);
  var columns = column_keys.map(function(key,i) {
    return {
      id: key,
      name: key,
      field: key,
      sortable: true
    }
  });

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    multiColumnSort: false
  };

  var dataView = new Slick.Data.DataView();
  var grid = new Slick.Grid("#grid", dataView, columns, options);
  var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));

  // wire up model events to drive the grid
  dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
  });

  dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
  });

  // column sorting
  var sortcol = column_keys[0];
  var sortdir = 1;

  function comparer(a, b) {
    var x = a[sortcol], y = b[sortcol];
    return (x == y ? 0 : (x > y ? 1 : -1));
  }
  
  // click header to sort grid column
  grid.onSort.subscribe(function (e, args) {
    sortdir = args.sortAsc ? 1 : -1;
    sortcol = args.sortCol.field;

    if ($.browser.msie && $.browser.version <= 8) {
      dataView.fastSort(sortcol, args.sortAsc);
    } else {
      dataView.sort(comparer, args.sortAsc);
    }
  });

  // highlight row in chart
  grid.onMouseEnter.subscribe(function(e,args) {
    // Get row number from grid
    var grid_row = grid.getCellFromEvent(e).row;

    // Get the id of the item referenced in grid_row
    var item_id = grid.getDataItem(grid_row).id;
    var d = parcoords.brushed() || data;

    // Get the element position of the id in the data object
    elementPos = d.map(function(x) {return x.id; }).indexOf(item_id);

    // Highlight that element in the parallel coordinates graph
    parcoords.highlight([d[elementPos]]);
  });

  grid.onMouseLeave.subscribe(function(e,args) {
    parcoords.unhighlight();
  });

  // fill grid with data
  gridUpdate(data);

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

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

});
</script>
BigFatDog added a commit that referenced this issue Jun 24, 2019
@BigFatDog
Merge pull request #70 from BigFatDog/feature/fix-hide-axis
b99010f 
fix #69 tested with examples
@BigFatDog
Copy link
Owner

v2.2.10 has been released to address this issue.

I've tested with example you provided:

  1. Set brushes, click 'hide axis' and then set brushes again.
  2. click 'hide axis' and set brushes.
  3. click 'hide axis' and set brushes in turns.

@BigFatDog BigFatDog reopened this Jun 24, 2019
@BigFatDog BigFatDog self-assigned this Jun 24, 2019
@rvberloo
Copy link
Author

Works nicely, thanks!

@BigFatDog
Copy link
Owner

You're welcome!

@joshhjacobson
Copy link
Contributor

@BigFatDog doesn't look like v2.2.10 is available through npm. Can you publish it there?

@BigFatDog
Copy link
Owner

Done. My mistake.

@joshhjacobson
Copy link
Contributor

Thanks!

@BigFatDog
Copy link
Owner

You're welcome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@BigFatDog BigFatDog

Labels
Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rvberloo @BigFatDog @joshhjacobson