d3.select(this).<> vs this.<>

[Devang Mundhra]

Hi,

I am a bit confused about when to use d3.select(this) vs only this.

The d3 documentation says that select() pulls elements from the current documents while the javascript this refers to the element whose method we are in.

So the two seem to be similar if we are inside a function. But yet they are not interchangeable.

Any pointers would be helpful.

Thanks,

Devang

[Mike Bostock]

> I am a bit confused about when to use d3.select(this) vs only this.

Within the context of most callback functions in d3, `this` refers to
the current node. For example, if you pass a function to `attr`,
`style`, or `each`, when that function is called, `this` will refer to
the current DOM element.

d3.select(this) creates a 1-element selection containing the current
node. This allows you to use D3's operators to modify the element, or
do whatever else, rather than using the raw W3C DOM API.

Mike

[Gordon Erlebacher]

Hi Mike, 

I have started programming in d3.s, and am using mootools classes. 

I have the code fragment: 

1. var Info = new Class({
   
2.                 this.node.on("mouseover", function(d) {
   
3.                 this.showDetails(d)   // showDetails has been bound to the current class with Bind (mootools)
   
4.                                               // but cannot be accessed unless this is class this
   
5.             }.bind(this))   // bind necessary so that showDetails is found. CurNode not found in showDetails.
6. ......

to access showDetails (a function of class info), I must have access to the class "this". But to access the current element, I must have access to the current node "this". I could of course access the class context using windows.class_instance but that is poor programming in my view. The bind(this) is necessary to access the class "this" but then I lose the current node inside showDetails. I tried using two mouseover events on the same node, but the second one overwrites the first. 

What can be done? 

Thanks!

      Gordon

[Ian Johnson]

You don't give much context here, can you put your code in a block? (http://bl.ocks.org)

is this.node a d3 selection?

if it is you can also do

node.on("mouseover:foo", ...)

node.on("mouseover:bar", ...)

you can also stash the current node this like

var that = this;

then use that inside the event handler.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Ian Johnson - 周彦

http://enja.org