Having issues with filterAll() and dc.redrawAll() not functioning properly with a dc.pieChart

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();
  })

Answer №1

pieChart is contained within the closure and not accessible globally. Instead of declaring var pieChart = ..., you should assign the chart to the global window object by using window.pieChart = ....

Understanding this concept is fundamental in Javascript programming. It would be beneficial to acquire a basic Javascript book to grasp these key principles. Familiarity with the language is crucial when delving into Javascript libraries such as dc.js and Crossfilter.

Answer №2

I encountered a similar issue in the past. It turned out that the Chart variables needed to be defined within the D3 callback function. By defining the chart variables before calling D3.tsv or D3.csv, you can ensure that it works correctly as shown below:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What sets local Node package installation apart from global installation?

My curiosity sparked when I began the process of installing nodemon through npm. Initially, I followed the recommended command and noticed the instant results displayed on the right side of my screen: npm i nodemon This differed from the installation ins ...

Finding an element in the DOM using the contains method with case insensitivity is proving to be a challenge, as lower-case() XPATH 2.0 does not seem to be effective in this

Given the following element : <div class="block-level-tooltip color_title ellipsis-tooltip" title="RATE">RED Infinity 25 Rate</div> I am attempting to create an xpath selector that is not case sensitive to the title attribu ...

Encountered a snag while executing Powershell with Selenium: Error message - unable to interact with

Looking to update a textarea with a value? The script below triggers an error stating "element not interactable". This occurs because the textarea is set to "display:none". However, manually removing the "NONE" word allows the script to successfully set th ...

problem decoding json data from external server

I have a custom Grease Monkey script that is responsible for collecting data from a game and sending it to my server for tracking our team's progress. This process involves multiple Ajax requests between the GM script and the game, followed by sending ...

Setting the default time zone to UTC for Material UI date and time picker

Looking to implement a dialog in React with Material UI for users to input start and end date/time. The goal is to have the default start set to the beginning of the current day and the default end set to the end of the current day (UTC). However, I'm ...

Submitting forms from a different router in React can pose a unique challenge

As a beginner in React, I am working on creating a simple meal app. In my App component, I am fetching meal data from an api and allowing users to click on a meal for more details. However, I am facing an issue where searching for a new meal on the detail ...

"Encountering a connectivity problem with Apollo server's GraphQL

I am facing a networking issue or possibly a bug in GraphQL(Apollo-Server-Express). I have tried various solutions but to no avail. When sending a query, everything seems perfect - values checked and request showing correct content with a 200 status code. ...

Differences between utilizing computed variables versus useState and useEffect

Is there any downside to initializing a computed variable instead of using useState/useEffect to track it when its value can be fully derived from another property? Let's consider the following example: /** * ex paymentAmounts: [100, 300, 400] */ co ...

emulating the behavior of a synchronous XmlHttpRequest

While I have taken the time to explore similar questions like Pattern for wrapping an Asynchronous JavaScript function to make it synchronous & Make async event synchronous in JavaScript, I want to ensure that I consider all potential solutions. Is it ...

Controller experiencing issues with Ajax passing null value

My webpage features a dropdown menu with a list of ID's to choose from. When a customer selects an option, it should update the price total displayed on the page. To achieve this functionality, I'm working on implementing an AJAX call that will u ...

What is the best way to showcase the outcomes of a map function in JSX?

I'm currently learning react and working on implementing the searchMap function (to display movie title/poster) with the TMDB API. While I am able to successfully log the necessary information to the console, I am encountering issues such as undefined ...

List output with jQuery AJAX showing object data

Here is my code that utilizes ajax for searching: $("#keyword").keyup(function() { var keyword = $("#keyword").val(); if (keyword.length >= MIN_LENGTH) { $.get( "./lib/data_siswa_ajax.php", { keyword: keyword, sekolah: $("#sekolah").val ...

Once I have verified the user's credentials through a POST request, I will proceed to make a GET request

I am in the process of constructing a dashboard that automates logging into an API and updating specific data elements. I have successfully managed to login and authenticate, but I am unsure how to proceed with chaining the GET request after the POST actio ...

HMR: The webpack-hot-middleware is not refreshing my webpage

My Vue application, titled hello-world, is utilizing webpack-dev-middleware and webpack-hot-middleware. When running the application, it shows that it's connected in the console. However, after making changes to my main.js file, the following message ...

Using a tuple as a key in a Map in Typescript/Javascript can be a powerful

Encountered a strange bug in my code where I'm struggling to achieve constant time lookup from a Map when using a tuple as the key. Here is an example highlighting the issue, along with the workaround I am currently using to make it function: hello. ...

Clear the data once the checkbox has been unchecked

Within my div containers, each containing a result, there is a checkbox associated with each one. When a user clicks on a single checkbox, the value of the currently checked box is sent to another page via an ajax call. The data is then fetched and display ...

Could you provide suggestions on how to update the content of an HTML tag within a Vue component?

I am new to Vue.js and struggling to grasp its concepts. I am interested in finding a way for my custom Vue component (UnorderedList) to manipulate the content within it. For example, if I have <p> tags inside my component like this : <UnorderedL ...

Include an additional tag solely by using a specific set of keys predetermined in advance

After getting inspiration from Stackoverflow, I decided to enhance my text-box with a tagging feature. The first step was downloading and adding the http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js file to my ASP.NET web folder, allowing me to u ...

Tips for removing a previous file from an 'input type' in HTML5 FileReader

Here is a file input with an associated function: <img id="uploadPreview"> <div id="changeImage">Change</div> <div id="customImage"> <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" / ...

While the data from Angular $resource can be viewed, it is not accessible in the code

As a newcomer to Angular, I'm facing a frustrating issue that I need help with. My $resource is fetching data from the server in key/value pairs like detail.name and detail.email. While I can access this data using {{detail.name}} in the view, I&apo ...