This is an exmaple of resuable components using d3. They are described as 'closures (i.e. functions) with setters and getters'.
In this example, _table
is the closure.
To make the component responsive, we add a dispatcher
which broadcasts events happening inside the component to all listeners.
In this example, a div listens to highlight
and select
events from the table, and changes its text accordingly.
Notice that I didn't assume anything about the data other that its structure. Also, I didn't hardcode any data-specific attributes.
xxxxxxxxxx
<meta charset="utf-8">
<title>Create a reusable table using d3 and jquery DataTables</title>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.datatables.min.js"></script>
<script src="gene_data.js"></script>
<script src="makeTable.js"></script>
</head>
<body>
<div id='highlighted'>Nothing Highlighted</div>
<div id='selected'>Nothing Selected</div>
<div id='container'></div>
<script>
var table_plot = makeTable()
.datum(gene_data)
.sortBy('pval', true)
.filterCols(['col', 'x', 'y']);
d3.select('#container').call(table_plot);
table_plot.on('highlight', function(data, on_off){
if(on_off){//if the data is highlighted
d3.select('#highlighted').text(
'Oops, I just stepped over gene ' + data.symb
);
}
});
table_plot.on('select', function(data, on_off){
if(on_off){//if the data is highlighted
d3.select('#selected').text(
'And it was the chosen one ' + data.GeneID
);
}
});
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js to a secure url
Updated missing url https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js to https://cdn.datatables.net/1.10.9/js/jquery.datatables.min.js
https://d3js.org/d3.v3.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js