UPDATE: D3 Table row as a link with Iron:Router in Meteor

Hello,

I’ve read several posts here (and elsewhere) of a similar nature, but none quite like what I am trying to do, hence the new topic.

As a quick overview, I am experimenting with the D3.js Sortable & Responsive Table example, in which I have added a class and an on click handler:

var rows = table.append('tbody').selectAll('tr')
		               .data(data).enter()
		               .append('tr')
                               .attr('class', 'clickable-row')
                               .on('click', function(d) {
                                   console.log(d);
                               });

What I would like to do is click on a row and navigate to a url of a D3 barchart (/graph) that uses some of the data from the table row.

I am using Iron:Router, and have the route set up and can navigate there by entering the complete url into the address bar (localhost:3000/graph).

Router:

    Router.configure({
        layoutTemplate: 'home'
    });
    Router.route('/', {
        name: 'main',
        template: 'main'
    });
    Router.route('/table', {
        name: 'table',
        template: 'datatable'
    });
    Router.route('/graph', {
        name: 'graph',
        template: 'barchart'
    });

I am not sure how to do this in the on click handler in the example…

Some of the articles I’ve read suggest that for meteor, I should instead make each row an anchor, and then setup a template event to handle the click. I have tried this:

Template.datatable.events({
    'click .clickable-row'(e) {
        console.log(e);
    }
});

But when I click on the row the only output on the console is from the table (console.log(d)) and not from the Template.datatable event. I have also removed the on click handler from the table, thinking that it might be overriding the template event handler, but I still did not get any event on click. So, this latter method does not seem to be the correct path forward.

How can I get either of these options working when clicking on a table row?

  1. load the /graph route from the table on click handler
  2. load the /graph route from the template event click handler

ETA:
It appears that what I want to do isn’t working the way I expect it to. irrespective of the routing issue. Consider this snippet:

var rows = table.append('tbody').selectAll('tr')
		               .data(data).enter()
		               .append('tr')
                               .attr('class', 'clickable-row')
                               .on('click', function(d) {
                                   console.log(d);
                                   Session.set('someVar', someObj);
                               });

I can set the session var ‘someVar’ anywhere else in the code with ‘someObj’ (and likewise get it) except for in this particular on click handler. My attempt at setting it here results in a null value when calling Session.get(‘someVar’), except within the on click block, limiting the session var’s scope to just this block of code instead of a global scope, even if I declare the session var globally.

Does anyone understand this issue?

TIA.