changing d3 class on mouseover

Question

I'm using d3 v4 and trying to apply a style to an element on mouseover. I'm wondering if it's an API change with V4 but I can't seem to get at the node

I have code:

.on('mouseover', () => {
  let self = d3.select(this);
  let c = self.attr('class');

but this gives an error

Cannot read property 'getAttribute' of null

So the d3.select() doesn't seem to work... The mouseover IS firing however.

I can use

.on('mouseover', (elem) => {
  console.log('elem', elem);

Which will give me some type of D3 object, but not a DOM node. I can't use any D3 methods on this object

  elem.classed("hilite", true);
  elem.attr("class", "hilite");

Neither of those methods exist on a d3 returned object.

So how do I do this super basic operation in d3?

related to Change class of one element when hover over another element d3

If this is TypeScript, could you please provide JavaScript code which it generated (or perhaps a fiddle)? d3.select should be working fine: https://jsfiddle.net/hjt5rxbx/ — Nixie, Sep 22 '16 at 18:31
There is no need for a fiddle, this is just the meaning of `this` in a fat arrow function. — Gerardo Furtado, Sep 23 '16 at 10:11

score -1 · Answer 1 · edited May 23 '17 at 12:32

-1

You can use arrow functions (if this an arrow function), if you don't need access to this of the current element. In this case you do need, because D3 calls event handlers setting this to the element triggering this event.

See: Using arrow functions with d3

edited May 23 '17 at 12:32

Community

1
1

answered Sep 22 '16 at 19:00

Nixie

637
4
9

changing d3 class on mouseover

1 Answers1