I am currently experimenting with linking charts together using dc and crossfilter. In this instance, I have successfully linked a table and a pie chart so that clicking on a pie slice updates the table accordingly.
However, there seems to be an issue with this particular line of code, as clicking on the hyperlink does not clear the filter. The highlighted wedge in the pie chart remains unchanged. I am using dc.js version 2.0.1, crossfilter version 1.3.14, and d3.js version 3.5.17.
<a class="reset" style="display:none" href="javascript:pieChart.filterAll(); dc.redrawAll();">reset</a>
Below is the remaining portion of the code:
<div class="row">
<div class="column-media">
<h2>Media</h2>
<table id="media-table"></table>
</div>
<div class="column-book" id="book-chart">
<h2>Books</h2>
<a class="reset" style="display:none" href="javascript:pieChart.filterAll(); dc.redrawAll();">reset</a>
</div>
</div>
<script type="text/javascript" src="lib/d3.js"></script>
<script type="text/javascript" src="lib/crossfilter.js"></script>
<script type="text/javascript" src="lib/dc.js"></script>
<script type="text/javascript">
d3.tsv("DH_Doigv2.tsv", function(error, data) {
data.forEach(function (d) {
d.id = +d.Item;
d.Item = d.id;
})
var facts = crossfilter(data);
//table
var itemDimension = facts.dimension(function(d) { return d.Item; });
//book chart
var bookDimension = facts.dimension(function(d) { return d.Title; })
var bookGroup = bookDimension.group();
var dataTable = dc.dataTable("#media-table")
.width(425)
.height(800)
.dimension(itemDimension)
//.showGroups(false)
.group(function (d) { return d; })
.columns([
function(d) { return '<a target="_blank" href="https://arc.lib.montana.edu/ivan-doig/item.php?id=' + d.Item+ '"><img src="https://arc.lib.montana.edu/ivan-doig/' + d.Thumb + '" /></a><div class="byline">' + d.Title + '</div><div class="quote">' + d.Quote + '</div><div class="sound">' + '<audio controls title="Audio courtesy of the Acoustic Atlas at MSU Library:" ' + d.Sound + ' "><source src=" '+ "http://acousticatlas.org/objects/aa0002377.mp3" + '" type="audio/mpeg">Your browser does not support the audio element.</audio>' + '</div>'; },
]);
var pieChart = dc.pieChart("#book-chart")
.height(550)
.width(500)
.dimension(bookDimension)
.group(bookGroup);
dc.renderAll();
})