Selections in custom plugins in mpld3 — Making a slider

Question

I'm trying to implement a slider in mpld3, much like this previous question .

I'm trying to build off of the draggable points example to do this. I'm having a bit of 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] + ")");
    }

In particular, what does this refer to in this context. I originally thought that I could replace d3.select(this) with something like d3.select("#"+foo) where foo = this.props.id (at the top of the draw() function). But this doesn't work, as shown in this notebook I made. (The second piece of code doesn't allow you to drag the red dots around).

In case what I'm trying to do isn't clear... have a look at this notebook . I've made a plugin that allows the red square (the slider) to be dragged horizontally. What I would like to do is make dragging the red dot change the position of the blue dot. 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 to have the blue dot move in the opposite direction of the red square when it is dragged. The question is, what do I put in place of "#redsquare" and "#bluedot" ?

Many thanks.

Answer 1

I know a hacky way to do this. Instead of d3.select(this) , you can find the specific element you are interested in the obj element array as follows:

      d3.select(obj.elements()[0][i])

There must be a prettier way, though.