Выбор в пользовательских плагинах в mpld3 - Создание слайдера

Question

Я пытаюсь реализовать слайдер в mpld3, как и this previous question.

Я пытаюсь построить draggable points example для этого. У меня немного проблемы, понимая, как работает следующий бит кода:

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] + ")"); 
    } 

В частности, то, что делает this см в этом контексте. Первоначально я думал, что могу заменить d3.select(this) чем-то вроде d3.select("#"+foo), где foo = this.props.id (в верхней части функции draw()). Но это не работает, как показано в this notebook. (Вторая часть кода не позволяет перетаскивать красные точки).

В случае, если я пытаюсь сделать это не ясно ... посмотрите на this notebook. Я создал плагин, который позволяет перетаскивать красный квадрат (ползунок) горизонтально. То, что я хотел бы сделать, это перетащить красную точку, изменив положение синей точки. Так что я хочу сделать что-то вроде:

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])] + ")"); 
    } 

Желаемого поведения для этого простого примера, чтобы иметь синюю точку двигаться в противоположном направлении красной площади, когда его тащили. Вопрос в том, что я ставил вместо "#redsquare" и "#bluedot"?

Большое спасибо.

Answer 1

Я знаю хакерский способ сделать это. Вместо d3.select(this), вы можете найти конкретный элемент, который вы заинтересованы в массиве obj элемента следующим образом:

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

Там должен быть красивей путем, хотя.