Add border in D3 cell when hovering

JavaScript
1

Hello there.

I´ve just finished the data visualization with a heat map. It passes all the tests. But there is one thing bothering me… Basically, the function I want have is:

When hovering one of the cells, a border should come around this cell.
Each of the cells have a attribute of class named “cell”.

I went to my CSS file, and wrote something like:

.cell:hover {
border: 1px solid black
}

And it doesn´t work. I am missing something and don´t know what.

2

Cool idea. With a little research, I noticed you can’t use border on an SVG element. But you can use stroke and stroke-width to the same effect. You can also change its color (fill) if you want. Turns out that you can’t style all SVG with CSS or even use all CSS properties on a given SVG element. I have learned something today.

I’m sure the stroke thing has to do with a rect really being a type of path and aside from vertices, only has a representation for drawing the sides (a stroke) and a representation of its interior color (the fill). I do remember setting those in D3.

3

At the end I found the same solution as you. After struggling with how to implement it, I did it :grinning:

Thanks.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.