How can I incorporate the mix-blend-mode into my d3 stroke technique?

I am working with a packed circles graph that has circles with a black stroke on hover. I am interested in using the CSS property mix-blend-mode: multiply to change the circle border when hovered over.

My goal is to have the stroke color be a darker shade of the fill color when a circle is selected or hovered over. Since the stroke colors are dynamically generated, I do not want to define each one individually.

https://i.sstatic.net/g5U0G.png

Is it possible to apply this CSS property along with d3.js circles so that only the stroke is affected by the mix-blend-mode property? It's worth noting that I am using version 4 of d3.js (d3.v4.min.js).

cssd3.js

Answer №1

Running a bit behind schedule here. I encountered a similar issue (wanting to apply mix-blend-mode only to the stroke, not the fill, but it didn't work out that way). Nevertheless, upon seeing your problem.. while I'm not well-versed in d3.js, perhaps this solution could be of assistance after two years:

In your JavaScript, since you're defining the fill colors statically, the best approach would be to also define the stroke colors there.

Within your JavaScript, I introduced a secondary color array called 'my_colors_stroke' and positioned just below the fill style as a stroke style. Additionally, in your CSS, set the default stroke-width to 0.

This is a quick and somewhat crude fix, however, I suggest checking out the d3.js bubble documentation as they have a slightly different method for creating bubbles, which might simplify things.

Insert revised JavaScript code snippet here...
Insert revised CSS code snippet here...
<script src="https://d3js.org/d3.v4.min.js"></script>

<div class="circles" id="circles">

Answer №2

To change the stroke color of your circle on hover, you can use the :hover pseudo-class in your CSS. This will allow you to set the stroke color to black when the circle is hovered over. For an example, refer to the left circle in the code snippet below.

Alternatively, you could try applying mix-blend-mode to the circle, although achieving a black stroke with this method may be tricky. Take a look at the right circle in the snippet for reference. Keep in mind that mix-blend-mode may not work in all browsers.

body {
  background: grey;
}

circle {

  fill: orange;
  stroke: DarkOrange;
  stroke-width: 2px;

}

circle.stroke-color:hover {

  stroke: black;

}

circle.mix-blend-mode:hover {

  mix-blend-mode: multiply;

}
<svg width="500" height="500">

  <circle class="stroke-color" cx="100" cy="75" r="50"/>
  <circle class="mix-blend-mode" cx="300" cy="75" r="50"/>

</svg>

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 are some solutions for resolving differences in the display of pseudo elements between Macbooks and Windows desktops?

Greetings! I successfully converted an XD file to HTML and CSS code. I tested it on my Windows PC, but I haven't had the chance to test it on a Macbook yet. Details: I implemented a button with a pseudo element to show a right arrow on the right side ...

htmlcss

Tips for creating semi-circular shapes using CSS gradients

I am trying to design a div element with a background made up of two colors divided by a half circle: My preference is to use gradients for easier animation purposes. I am looking to avoid using pseudo-elements or border-radius, and my HTML structure limi ...

cssbackground-imagegradient

Unique way of specifying background position for Firefox and Chrome browsers

Currently, I am utilizing an image as the background in a div and I am interested in using different positioning attributes for Firefox and Chrome. For Mozilla, I plan to use: background-position: left -14px bottom -1px !important; And for Chrome, I int ...

htmlcss

Align both vertically and horizontally in the center of the body

I have two images aligned vertically inside a wrapper. How do I center the wrapper within the body? What is the best way to center my wrapper inside the body? <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> ...

htmlcss

Hovering over the designated area will reveal the appearance of

I've encountered an issue with a list group in a card. Specifically, when hovering over the topmost item in the list group, a border appears underneath it (which should only appear when hovering). However, when I try to override this behavior using :h ...

htmlcsstwitter-bootstraphoverbootstrap-4

Having trouble getting JavaScript validation to function properly

I'm struggling to make validation work properly when hitting the submit button. No alert messages appear, even though I should be receiving alerts for empty fields. Can someone identify what is wrong with my code? I have tried checking the validation ...

javascripthtmlcssvalidation

What is the best way to conceal a Material UI button with CSS?

For my TODO react app, I am using a Material UI button. My goal is to create a form with an input field and a submit button, but I want the submit button to be invisible so that users think the form submits when they press the "Return" key. import { Tex ...

cssreactjsformsbuttonmaterial-ui

Is your FontAwesome icon appearing oversized?

While working on , I noticed a discrepancy in the header design compared to . The elements "#navigation ul.nav > li a" seem to be wider on the former site than on the latter, despite my efforts to replicate the styles precisely. Upon further inspectio ...

javascriptjqueryhtmlcss

Reposition the div element on mobile devices using media queries

Hello, I'm facing an issue on mobile with my website: dev site Today, I implemented a dropdown menu with flags to allow language switching. However, the dropdown in mobile is appearing under the hamburger nav bar. I was thinking of using media querie ...

htmlcssmedia-queries

Is there a way to conceal a Select element so that it is not visible on the screen, yet can still activate the dropdown menu when another element is clicked

One idea for my website is to replace a select element with a button that triggers the dropdown. The plan is to place the select element inside a button DIV, position the select element on top of the button, and set its opacity to 0 so it appears hidden. W ...

htmlcssdrop-down-menu

Placing a Div wrapper around the contents of two corresponding elements

I am currently attempting to wrap a div with the class name 'wrapped' around two other divs containing innerHTML of 'one' and 'two'. <div class='blk'>one</div> <div class='blk'>two</di ...

javascriptjqueryhtmlcss

Position an iframe in alignment

I'm working on a HTML page and I have been trying to figure out how to align an iframe at the bottom of the page so that it spans the entire width. Despite my efforts, I haven't been successful in getting the iframe to align properly at the botto ...

htmlcssiframe

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Is it possible to create a radial grouped circle using d3.js, similar to the image below: https://i.sstatic.net/1Hwd2.jpg I have written some code as shown below. However, I am facing challenges in connecting every circle with a curved line and displayi ...

javascriptcssd3.jssvg

My confusion is running high when it comes to navigating the mobile version of my website

Creating a navigation bar for my website has been challenging. Whenever I switch to mobile view, the list in my navigation bar shifts 40px to the right side of the screen where there's nothing. Is there any way you can assist me with this issue? ...

htmlcss

Delete the CSS class from a specific HTML element

Having just started learning HTML and CSS, I encountered an issue. I applied a CSS class to a table element. Subsequently, I inserted a child table within the parent table. The problem arose when the CSS class of the parent table also influenced the child ...

htmlcss

The menu bar becomes distorted when the page is zoomed out

Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm# I tested the link on Internet E ...

htmlcss

The CSS Validator does not recognize the CSS pointer-events and appearance properties

I'm a CSS beginner who recently created an app. I've encountered some errors and warnings when validating my CSS code: https://i.stack.imgur.com/g4MUz.png https://i.stack.imgur.com/Es1DE.png Could someone kindly explain these errors and warnin ...

cssw3c-validation

Toggle css comment line using gulp

Is it possible to temporarily deactivate a particular CSS comment on a specific line using Gulp and then reactivate it after completing a build task? As an illustration, I am interested in deactivating the @import 'compass/reset'; statement loca ...

cssnode.jsnpmgulpcompass

Uniform height across certain thumbnail images

I have hit a roadblock while working on a project, and I am unable to resolve it :) I am using the Bootstrap grid system and I want to display thumbnails within a content section, with six thumbnails per row. The issue is that while the text below each ima ...

csshtmlheightmultiple-columns

Having trouble with the Wordpress JS CSS combination not functioning properly and unable to determine the cause

I recently set up a page on my WordPress site using the Twenty Seventeen theme. At the top of the page, I created a toolbar for users to easily adjust the font size and background color. Check out the image below for reference: See Image for Bar Here&apo ...

javascriptjquerycsswordpress