CODEWITHSUNDEEP
javascriptd3.jsdc.jscrossfilter
mutanthumb
mutanthumb

Reputation: 161

filterAll() and dc.redrawAll() not working on dc.pieChart

I'm still trying to work with dc and crossfilter to link charts together, here I am linking a table and a pie chart together. The linking is working between the chart and table such that when I click on a pie slice the table updates accordingly.

However this line does not seem to do anything, when I click on the hyperlink. The piechart still shows the same highlighted wedge so the filter is not actually cleared. Using dc.js version 2.0.1, crossfilter version 1.3.14, d3.js version 3.5.17.

<a class="reset" style="display:none" href="javascript:pieChart.filterAll(); dc.redrawAll();">reset</a>

Here is the rest 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();
  })

Upvotes: 1

Views: 1265

Answers (2)

Daya Paari
Daya Paari

Reputation: 96

I was facing the same issue before. After a while I realize the Chart variables are defined inside the D3 callback. So if you define your chart variables before D3.tsv or D3.csv it will work like below:

<script type="text/ecmascript" async="async">
    var pieChart; //Define all your chart Variables here
    d3.csv("Data/MyData.csv", function (errormsg, Data) {

Upvotes: 1

Ethan Jewett
Ethan Jewett

Reputation: 6010

pieChart is local to the closure, not a global object. Instead of var pieChart = ..., assign the chart to the global window object using window.pieChart = ....

This is the kind of thing that is covered in a basic Javascript book. I'd recommend picking one up. The first thing to know when starting to learn Javascript libraries like dc.js and Crossfilter is the language itself.

Upvotes: 1

Related Questions