Issue with d3 brush reset functionality not functioning as expected after removal

When the brush is removed by clicking instead of dragging, an issue arises where the active selection does not reset. Any suggestions on how to fix this?

Any thoughts on addressing this issue?

Cheers! 

// A function that manages a brush event and toggles the display of foreground lines.
function toggle_brush_parallel_chart() {    
    for(var i=0;i<dimensions.length;++i){
        if(d3.event.target==y[dimensions[i]].brush) {
            extents[i]=d3.event.selection.map(y[dimensions[i]].invert,y[dimensions[i]]);
        }
    }

    foreground.style("display", function(d) {
        return dimensions.every(function(p, i) {
            if(extents[i][0]==0 && extents[i][0]==0) {
                return true;
            }
            return extents[i][1] <= d[p] && d[p] <= extents[i][0];
        }) ? null : "none";
    });
}

http://plnkr.co/edit/RkWBgQ6oi584H3212WrM?p=preview

This scenario occurs when the brush is completely cleared at the beginning:

https://i.sstatic.net/khDB7.jpg

javascriptangularjsd3.js

Answer №1

I recently made some modifications to your code. Take a look at the changes I implemented here - http://plnkr.co/edit/oYhx6DSjQHI3E3nmE97h?p=preview. Does this align with what you were looking for in terms of functionality?

g.append("g")
  .attr("class", "brush")
  .each(function(d) {
    d3.select(this).call(y[d].brush = d3.brushY().extent([[-8, 0], [8,height]])
    .on("start", brushstart) // <-- !!
    .on("brush", gobrush)
    .on("brush", brush_parallel_chart));
  })
  .selectAll("rect")
  .attr("x", -8)
  .attr("width", 16);

I have updated the function name from brushstart to gobrush, and introduced a new brushstart function. The new brushstart function is now attached to the selection start event. Within this function, I have set appropriate styles that reset the selection.

function brushstart(selectionName) {
  foreground.style("display", "none")

  var dimensionsIndex = dimensions.indexOf(selectionName);

  extents[dimensionsIndex] = [0, 0];

  foreground.style("display", function(d) {
    return dimensions.every(function(p, i) {
        if(extents[i][0]==0 && extents[i][0]==0) {
            return true;
        }
      return extents[i][1] <= d[p] && d[p] <= extents[i][0];
    }) ? null : "none";
  });
}

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

how to retrieve directive attribute values when clicking on a submit button

Here is a sample program I created using AngularJS directive and controller. In the directive, I have created some attributes like print-Display="true", is-Silent="false", is-Authentication="false", is-Download="false". How can I retrieve these attribute v ...

angularjsangularjs-directive

The drag-and-drop feature for uploading files is not functioning properly

After following the JavaScript drag and drop script tutorial mentioned here and using the PHP upload script provided here, I made modifications to the XHR request to upload.php in the JS code. The progress now reaches 100%, but the uploaded image does not ...

phpjavascripthtmluploaddrag-and-drop

Having trouble with the jQuery select2 AJAX functionality?

I've been experimenting with the jQuery select2 plugin and attempting to integrate AJAX with my external data, but unfortunately it's not working as expected. I'm curious if anyone can help me identify what mistake I might be making or if th ...

javascriptjqueryajaxjquery-select2

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...

javascriptcsstwitter-bootstrapangulartypescript

Dynamically obtaining the screen width in JSP using a variable

Could someone provide assistance on how to resize an image using an img src="blah.jpg?width=x" so that my page can be displayed at various sizes? I just need x (width) as a JSP variable. Update 2021: It's been 9 years since this question wa ...

javascriptcssjsp

What is the process for updating the label on the leaflet control layers toggle?

I have incorporated mapbox and leaflet into my website, and I'm looking to modify the label "Satellite" in leaflet-control-layers-toggle to "SAT". Is there a way to achieve this change using leaflet? https://i.sstatic.net/DAR9m.png ...

javascripthtmlangularjsleaflet

Embed programming into an iframe upon its loading

I am looking to enhance the functionality of an iframe by injecting HTML and JavaScript code into it upon loading. The goal is to enable users to navigate through different links within the iframe while they are browsing. Here is what I have attempted so ...

javascriptjquery

How can I identify duplicate values within two distinct javascript objects?

Consider two sets of JavaScript arrays containing objects: var allUsers=[{name:"John",age:25},{name:"Emily", age:30},{name:"Michael",age:22}] and var activeUsers=[{name:"John",status:"active"},{name:"Sarah", status:"active"}] I am attempting to iterat ...

javascriptjqueryjson

Using an external npm module in TypeScript can result in the tsc output directory being modified

In my TypeScript project, I have set up the build process to generate JavaScript files in the ./src/ directory. Everything works smoothly when building against existing npm modules, such as Angular 2 imports. However, I encountered a strange issue when I ...

javascriptangularjsnode.jstypescriptnpm

How can you determine whether the CSS of a <div> is defined in a class or an id using JavaScript/jQuery?

Hey there, I'm currently working on dynamically changing the CSS of a website. Let's say we have a div like this: <div id="fooid" class="fooclass" ></div> The div has a class "fooclass" and an ID "fooid", and we're getting its ...

javascriptjqueryhtmlcss

Tips for enhancing the "Eliminate render-blocking resources" score on the Lighthouse report for Progressive Web App (PWA) optimization

Check out my first attempt at a PWA here: My goal is to achieve a perfect 100% in Lighthouse for all categories :) https://i.sstatic.net/9Ql9r.png Although I've read the "Learn More" page, I'm still struggling with how to implement Bootstrap C ...

javascriptcssbootstrap-4progressive-web-appslighthouse

The Best Way to Calculate a Total Sum with Comma-Separated Values in AngularJS

In my application, I am utilizing the MEAN stack with AngularJS as the front-end. I am trying to figure out how to calculate the total sum and include comma values. I have managed to get the total sum value, but the comma value is not being calculated prop ...

htmlcssangularjsmeanjs

Is there a method to verify the sequential loading of JavaScript files?

It has come to my understanding that in the case of having two JS files (x.js and y.js), where y.js uses functions from x.js, it is important to load x.js before y.js when loading the files. For larger projects, I am curious if there are tools available s ...

javascripthtmldomfrontendbackend

How can I use Java Script to create animation of vertical black bars of a specific width moving across a white background?

Looking for a JavaScript code that can animate vertical black bars of a specific width moving over a white background. The desired outcome is similar to the video found at: https://www.youtube.com/watch?v=bdMWbfTMOMM. Thank you. ...

javascriptjqueryhtmlcss

React's back button is experiencing functionality issues

I'm having an issue with my quiz page where the previous button is not functioning properly. The user should be able to change their answer before submitting, but after 5-6 clicks on the previous button, they are redirected to the next page without co ...

javascriptreactjsreact-redux

Chrome and Firefox provide excellent compatibility for running JavaScript, whereas Safari may encounter some issues. Opera's performance with JavaScript can be quirky

Disclaimer: I'm new to web design and development. I have encountered an issue with posting information from a form built on CodeIgniter using jQuery. The form posts successfully in Chrome and Firefox, with the current page automatically reloading. H ...

javascriptjqueryformscodeignitercross-browser

The anchor is no longer functioning

Having just started with Javascript, I am facing some issues on my website... I have implemented the fullPage.js script along with another script for a vertical menu containing hidden submenus. However, the script for the navigation menu is not functioning ...

javascriptjqueryhtmlcssfullpage.js

JS roles encountered an issue with a TypeError: it is unable to read the property 'push' because it is undefined

I'm experiencing a problem with setting roles in the admin panel of my website. The roles I've configured are mmUser, mmMerchant, mmAdmin. When a user signs up, they are automatically assigned the mmUser role. In the admin panel, I'm attemp ...

javascriptarraysjsonnode.jsmongodb

"Is it possible to create a loop function in JavaScript

Could someone please guide me on how to incorporate an endless loop or a consistent repetition into this section of my JavaScript code? <script> $(".modcontentnewestmore").hide(); $('.morebutton').click(function () { if ($('.modco ...

javascriptjquery

There seems to be an issue with the proper addition of Firebase realtime data to the scope variable in Angular

This shows the firebase structure for categories2. https://i.stack.imgur.com/ogzhD.png Additionally, this is for subcategories2. https://i.stack.imgur.com/1LMyD.png In order to present data on the screen, I aim for $scope.Categories [] to be populated ...

angularjsfirebasefirebase-realtime-database