Ways to provide instruction for all offspring of a tree node

When using d3js in my tree layout, I am looking to change certain properties of a selected node (choix1) and all its descendants. My goal is to assign a specific class (choix2) to all descendants.

  .on("click", function() {
    d3.select(this).classed("choix1", true); // selecting a node
    d3.select(".choix1").children.classed("choix2", true); // assigning a class (choix2) to all descendants
  })

While the selected node updates correctly, the properties of the descendants remain unchanged. The modifications I expect to see are not taking effect.

javascriptd3.jsdom

Answer №1

Your approach of mixing D3 API with DOM API methods is causing issues as they are not compatible. When trying to access the .children property on the D3 selection returned by d3.select(".choix1"), it results in an error because that property belongs to the ParentNode interface, which is part of the Element interface implemented by the DOM.

To properly set a class on child elements using the .classed() method, you need to wrap them in a D3 selection by first calling .selectAll(this.children). Here's how your code should be modified:

.on("click", function() {
  d3.select(this).classed("choix1", true); 
  d3.selectAll(this.children)   // wrap the children in a D3 selection first...
    .classed("choix2", true);   // then call methods on that selection.
})

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

Comparing JSON objects using Javascript and AngularJS

In the page I'm working on, there are several input fields where users can enter data such as text boxes and dropdowns. When a user fills in the data and clicks SAVE, certain checks and manipulations need to be done before the actual saving process st ...

javascriptangularjsjson

When transitioning in Vue, pagination bullets shift to the left upon changing routes

While using Vue 3 and swiper.js, I encountered an issue where the pagination bullets move to the left when the route changes (component unmounted). It appears that the styling for the bullets and active button also disappear. I have created a reproduction ...

javascriptvue.jsvuejs3swiper.js

Listener for resizing events in jQuery implemented in a separate script file

One issue I am facing is separating my jQuery code from my HTML page, especially when it comes to the resize event. I have an index.html file and a main.js file where I prefer to keep all of my jQuery code. The problem arises when the resize event does no ...

javascriptjqueryhtml

Tips for editing events in the "react-big-calendars" component

I am looking to implement a feature where users can click on events in a calendar and then edit either the dates or event titles. Can this functionality be achieved using "react-big-calendar"? If not, are there any other packages you can recommend? <Cal ...

javascriptreactjsnext.jsreact-big-calendar

What is the predefined value for a multi-select generated by the ng-for directive in Angular?

I am having trouble setting default selected values for the multi-select. Despite trying various methods such as initializing the ngModel to bind the variable and using [selected] = "selectedSegment == 'S1'", none of them seem to be effective fo ...

javascripthtmlangularangular8

Interacting with external domains through ajax queries

I'm encountering an issue with my javascript code that sends an ajax request, but I'm not receiving any response. Can anyone offer some guidance on how to troubleshoot this problem? Thank you! The URL I am attempting to retrieve is: Here's ...

javascriptajax

Command for DiscordJS to verify users

I have a requirement to develop a verification command using discord.js v12. This command will assign a verified role based on the configuration specified in a config file. Config file: { "token": "my-token", "status": " ...

javascriptnode.jsdiscord.js

Showing information from a table for editing purposes with the use of HTML input tags

As I navigate my way through the complexities of HTML and PHP coding, I’m faced with a challenge in displaying database content on an editable table within my web page. Clicking the edit button should lead to a separate page where data can be modified. ...

javascriptphphtmlcss

What is the best way to link and store invoice formset with the main form foreign key in Django?

I am new to Django and need help. I am trying to save my invoice in a database, but the issue I'm facing is that I can't retrieve the foreign key from the main form when I try to save the formset. View.py def createInvoice(request):` if requ ...

javascriptpythonhtmldjango

Using Backbone: Leveraging a custom extended model when fetching a collection

Currently, I am working on developing a custom Wordpress theme using technologies like Javascript, Requirejs, and Backbonejs. As part of this process, in the index route, I have set up a new postsCollection app.postsCollection = new Posts.Collection(); to ...

javascriptwordpressbackbone.js

Tips for creating overlapping scroll effects on elements

I'm currently working on a project that already has a complex front end. I need to incorporate a new element as a replacement for a dropdown menu. This new element is essentially a div connected to a collection using knockout. The issue arises when t ...

javascriptjqueryhtmlcss

The smooth scrolling feature fails to function properly in Lenis when clicking on links with specified IDs

Is there a reason why the scroll-behavior: smooth property doesn't function properly when Lenis library for smooth scrolling is included? It seems to work fine when the Lenis code is commented out, but once it's added back in, the scrolling isn&a ...

javascripthtmlcsssmooth-scrolling

Reduce the number of columns in JQGrid when the window is resized

I've encountered an issue with jqGrid while working on a table with numerous columns. When resizing the browser window or viewing the web app on a mobile device, I need to display only a limited number of columns in the grid table for better usability ...

javascriptjqueryjqgridresponsive

Error: NS_ERROR_CORRUPTED_CONTENT encountered while running a Live Server with TypeScript-generated JavaScript files

Currently, I am working on creating a straightforward banking website using vanilla TypeScript, HTML, and CSS. My plan is to integrate the Plaid API later on to conduct operational tests. To get started, I am testing the project structure locally using Liv ...

javascripthtmltypescriptmime-typesliveserver

Is it possible for AngularJS to detect $locationChangeSuccess when the page is refreshed?

In my Angular project, I have set up event listener for $locationChangeSuccess using the following code: $scope.$on('$locationChangeSuccess', function(event) { console.log('Check, 1, 2!'); }); While this works perfectly when navigat ...

javascriptangularjs

Locate the user, repository, and file path within a GitHub URL

How can I extract the user, repo, and path from a Github URL pasted into a form in order to make API requests? For example, https://github.com/HubSpot/BuckyClient/blob/master/README.md I have started working on a regex solution to locate the different par ...

javascriptgithubgithub-api

In Firefox, the HTML label fails to activate the corresponding input field when the mouse is moved while clicking

If you click on the label in the example below, it will change the state of the input. document.querySelector("label").addEventListener("click", function() { console.log("clicked label"); }); label { -webkit-user-select: none; -moz-user-select: no ...

javascripthtmlcsslabel

Completely triggering a forced refresh on a single page application, disregarding cache, service workers, and all other

After experimenting with service workers on my Vue-built website, I made a critical error that has left Safari on my iPhone displaying only a blank page. To troubleshoot the issue, I connected my phone to my Mac and utilized Safari's inspector tool t ...

javascripthtmlvue.jsservice-worker

Webpack is notorious for creating multiple copies of images

Having an issue with Webpack where it's generating duplicate images, one of which is broken. I have an original image image, and after running Webpack, two duplicates are created. One works fine: image, but the other one is broken: image. I'm us ...

javascriptcsswebpack

Navigating through dynamic elements using Selenium

I'm having trouble extracting boxer information from the flashcore.com website using Selenium. The code I've written doesn't seem to be working properly. Can anyone point out where the error might be? The expectation is that Selenium should ...

javascriptpythonajaxseleniumparsing