Choice in custom plugins in mpld3 - Creating a slider

I am trying to implement a slider in mpld3 like this previous question .

I'm trying to build an example of draggable points for this. I am having trouble understanding how the following bit of code works:

function dragged(d, i) {
      d[0] = obj.ax.x.invert(d3.event.x);
      d[1] = obj.ax.y.invert(d3.event.y);
      d3.select(this)
        .attr("transform", "translate(" + [d3.event.x,d3.event.y] + ")");
    }

      

        
        
        
      

    

Specifically what it means this

in this context. Initially I thought that I could replace d3.select(this)

with something like d3.select("#"+foo)

where foo = this.props.id

(at the top of the function draw()

). But it doesn't work as shown in this notebook I did. (The second part of the code prevents you from dragging the red dots).

In case I am trying to do this, it is unclear ... take a look at this notepad . I created a plugin that allows you to drag the red square (slider) horizontally. What I would like to do is drag the red point, changing the position of the blue point. So I want to do something like:

function dragged(d, i) {
      d[0] = obj.ax.x.invert(d3.event.x);
      sliderPosition = obj.ax.x(d[0]);
      targetPosition = obj.ax.x(-d[0]); // inverted sign
      d3.select("#redsquare")
        .attr("transform", "translate(" + [sliderPosition,sliderObj.ax.y(d[1])] + ")");
      d3.select("#bluedot")
        .attr("transform", "translate(" + [targetPosition,targetObj.ax.y(d[1])] + ")");
    }

      

        
        
        
      

    

The intended behavior for this simple example is for the blue point to move in the opposite direction from the red square as you drag it. The question is, what am I instead of "#redsquare"

and "#bluedot"

?

Many thanks.