0

Writing a small prototype using D3js, I wrapped out the playground into an Game object:

var Game = function(){
    this.svg = d3.select( "body").append( "svg")
        .attr( "width",  500)
        .attr( "height", 500)
    ;

    _this = this;
    this.svg.on( 'click', function(){ _this.click()});

To capture mouse clicks on the SVG I want to use D3's methods:

Game.prototype.click = function(){
    var M = d3.mouse( this.svg[0][0]);
    console.log( "Clicked: "+M[0]+':'+M[1]);
}

I really doubt that this.svg[0][0], that I came up to after experiments, is the intended way of passing the container object in this case.

Question: what's the right way of passing the container to d3.mouse() function in D3js, having a varialbe holding the element?

Serge
  • 1,531
  • 2
  • 21
  • 44
  • `var M = d3.mouse(this)` should work; check [this answer](http://stackoverflow.com/questions/16770763/mouse-position-in-d3#16770859) – FernOfTheAndes May 03 '14 at 12:44
  • @FernOfTheAndes, `this` is `Game` in my example, and is `window` in the linked one. So, no go. – Serge May 03 '14 at 17:12

1 Answers1

1

Upd. figured out myself: selection.node() does the thing. i.e.:

var M = d3.mouse( this.svg.node());
Serge
  • 1,531
  • 2
  • 21
  • 44
  • 1
    To be clear, `this.svg[0][0]` is a perfectly acceptable way of accessing the DOM node from a single-element d3 selection, it just makes for rather obscure code. For that reason I tend to prefer the more intuitive and readable `selection.node()`. – AmeliaBR May 04 '14 at 16:43