Adjust the transparency of all d3.svg.circles with the exception of those in the hovered class

Feeling completely stuck on this issue. I'm trying to create a scatterplot that highlights specific data points based on clusters when the user hovers over that class of data. To simplify things, I've included the following code snippet with two data clusters.

Below is the JavaScript code:

var svg = d3.selectAll("body").append("svg").attr("width",500).attr("height",500);

svg.append("circle").attr("cx",50).attr("cy",60).attr("r",5).attr("id","circle1");
svg.append("circle").attr("cx",70).attr("cy",100).attr("r",5).attr("id","circle1");
svg.append("circle").attr("cx",50).attr("cy",90).attr("r",5).attr("id","circle2");
svg.append("circle").attr("cx",70).attr("cy",70).attr("r",5).attr("id","circle2");

And here is the CSS code:

svg:hover circle {
  opacity: 0.5;
}
svg:hover #circle1:hover ~ #circle2 {
  opacity: 1;
}
svg:hover #circle2:hover ~ #circle1 {
  opacity: 1;

The first two parts of the CSS are working fine, but for some reason, hovering over circle2 does not change the opacity of circle1.

javascriptcssd3.jshover

Answer №1

First Issue: IDs should be unique. Currently, there are duplicated IDs in your code. Based on the title of your query, I have updated them to use class instead.

Here is a simple approach to adjust opacity based on the class of an element when hovered over:

var thisClass = d3.select(this).attr("class");

Next, you can set the opacity based on the class. Here's an example snippet to demonstrate this:

var svg = d3.selectAll("body").append("svg").attr("width",500).attr("height",500);

svg.append("circle").attr("cx",50).attr("cy",60).attr("r",5).attr("class","circle1");
svg.append("circle").attr("cx",70).attr("cy",100).attr("r",5).attr("class","circle1");
svg.append("circle").attr("cx",50).attr("cy",90).attr("r",5).attr("class","circle2");
svg.append("circle").attr("cx",70).attr("cy",70).attr("r",5).attr("class","circle2");

d3.selectAll("circle").on("mouseover", function(){
  var thisClass = d3.select(this).attr("class");
  d3.selectAll("circle").attr("opacity", 0.5)
  d3.selectAll("." + thisClass).attr("opacity", 1)
}).on("mouseout", function(){
d3.selectAll("circle").attr("opacity", 1)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

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

Issue with Datepicker functionality within the <th> element is causing it to malfunction

Currently, I am attempting to utilize the Bootstrap datepicker, but I am facing an issue when trying to implement it within a table, specifically inside a th element. Below is the structure of my table: <table id="table" class="table table-bord ...

htmlcsstwitter-bootstrap

Leveraging Shared Workers within a React application

I am currently working on a backend app that continuously sends events to my React app through Web Sockets. One of the requirements is for a new browser tab to be opened when a specific event is received. However, since the application will be used by a si ...

javascriptreactjsshared-worker

Prevent the use of unnecessary object properties

Currently, my project involves using Typescript and React in conjunction with Material-UI. Specifically, I am utilizing Material-UI's styling solution, which implements CSS in JS methodology in a Hook-like manner as outlined in their documentation: co ...

javascriptreactjsmaterial-uieslintcss-in-js

Creating a conditional statement within an array.map loop in Next.js

User Interface after Processing After retrieving this dataset const array = [1,2,3,4,5,6,7,8] I need to determine if the index of the array is a multiple of 5. If the loop is on index 0, 5, 10 and so on, it should display this HTML <div class="s ...

javascriptreactjstypescriptnext.js

Sending Javascript variable to AngularJS

I'm a beginner in the world of AngularJS and JavaScript, and I'm struggling to figure out how to pass a JavaScript variable into my AngularJS controller. Here's the snippet from my html page: <!DOCTYPE html> <html lan ...

javascriptangularjsonload

Redis appears to be missing the expected results

After following an express demo which involved storing and retrieving values with Redis, I attempted to implement the code in my own Express app. However, I encountered issues as the req.online variable was returning null when I tried to retrieve its lengt ...

javascriptnode.jsexpressredis

Exploring search capabilities within D3 graph nodes

After creating a JSON file with four tiers and utilizing D3.js's collapsing box format to visualize it (source: https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460), I've run into an issue. The problem stems from the sheer size of the J ...

javascripthtmljsond3.js

Organize items within an array based on dual properties rather than a single one

Here is an array of objects that I would like to group based on certain keys (JSON format): [ { "name": "john", "lastName": "doe", "gender": "male" }, { "name": &qu ...

javascripttypescriptjavascript-objects

What is the process of configuring the "debuggerAddress" Chrome option using the selenium-webdriver JavaScript API?

One of the recognized "capabilities" in Webdriver is the "debuggerAddress," but I am having trouble finding a way to set this option in either the Capabilities class or ChromeOptions in the JavaScript API. It seems that setting the "debuggerAddress" option ...

javascriptgoogle-chromeselenium-webdriverselenium-chromedriverbrowser-testing

Older browser compatibility for Flexbox flex-flow alternative

<template> <div> <h2>Kanal Listesi</h2> <div class="container"> <div v-for="(channel,index) in channels" :key="index"> <div v-if="channel.ChName"> <img :src="'h ...

javascripthtmlcssvue.jsflexbox

Using the clearColor property for gradients in Three.js

I have successfully achieved a solid clearColor in my threejs project, but I'm now wondering if it's possible to create a gradient clearColor for a more dynamic sky effect. Alternatively, is there a way to add depth to the sky using lights? Belo ...

javascriptthree.js

Simply tap on the image to include it in the HTML5 Canvas drawing

Currently, I am in the process of drawing a circle onto my html5 canvas as shown in the code snippet below: <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> &l ...

javascripthtmldrag-and-drophtml5-canvaskineticjs

What is the best way to navigate a carousel containing images or divs using arrow keys while maintaining focus?

Recently, I have been exploring the Ant Carousel component which can be found at https://ant.design/components/carousel/. The Carousel is enclosed within a Modal and contains multiple child div elements. Initially, the arrow keys for navigation do not work ...

javascriptjqueryhtmlreactjsantd

Encountered a problem with Vuetify's sass variables

I am currently working on my Vuetify3 project where I need to customize a select dropdown from a library to match the style of Vuetify's select dropdown perfectly. After inspecting Vuetify's select box, I decided to replicate its styles by using ...

cssvue.jssassvuetify.jsvuetifyjs3

Initializing a resource in AngularJS by populating it with a string retrieved from an $http request

One issue I encountered with my angular app is the need to initialise some resources with a string value. For example: angular.module('client.core.resources') .factory('AuthenticationResource', ['$resource','ConstantV ...

javascriptangularjs

Error: The system encountered an issue while trying to access an undefined property 'find'

I've been working on developing the backend for a wishlist feature, but I've encountered an issue with my code. (node:19677) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'find' of undefined Despite trying to redefi ...

javascriptnode.jsmongodb

Encountered a setback while trying to add information to a MySql database through Express

When I try to execute an insert query on a database, it throws the following error: code: 'ER_PARSE_ERROR', errno: 1064, sqlMessage: 'You have an error in your SQL syntax; check the manual that corresponds to your MySQL server versio ...

javascriptmysqlnode.jsexpress

Certain images are being rotated in a counter clockwise direction by 90 degrees

Users can upload images of their items, but some pictures appear rotated 90 degrees counter-clockwise after uploading. This could be due to the way the photos were taken on an iPhone. Is there a simple solution to correct this rotation issue? The following ...

javascriptimageimage-rotation

Showing both labels and input fields side by side with CSS developments

I'm having trouble getting the label and input elements to display on the same line for this form. I've tried using CSS properties like display, float, and clear, but the result is not what I intended. Here is how the form should look: form & ...

htmlcssformsuser-interface

Express-session is failing to return a value in spite of my explicit declaration of the session

I've been working on my website for quite some time and everything was smooth sailing, until now. Here's the issue: after a user logs in, a session cookie named "user" is created to store their email. Upon console logging the cookie right after ...

javascriptexpressaxiosexpress-session