끌기 후에 포인트 정보를 얻으십시오

Question

IPython 노트북에 대화식 matplotlib-plots를위한 놀라운 mpld3가 있습니다. mpld3에는 플러그인도 있습니다. 하나는 특히 흥미 롭습니다. 플롯에서 한 점을 선택하여 드래그하면 여기에 표시됩니다 :

http://mpld3.github.io/examples/drag_points.html.

링크의 소스 코드는 아래 그림을 생성합니다. 내 포인트를 드래그 한 곳의 플러그인에서 정보를 얻고 싶습니다. 하지만 실제로 자바 스크립트 부분에서 길을 잃었고 어떻게 정보를 다시 얻을 수 있었는지.

Answer 1

나는 이것에 대해 궁금와 비슷한 일을하고 싶어했다. 이것이 내가 찾은 것입니다. 먼저 마우스 좌표가 무엇인지 알고 싶었습니다. 좌표를 읽을 수 있으려면, 내가 drag_points.py에서 "인쇄"다음과 유사한 "경고"문, 삽입 :

var startx = 0; 
    var starty = 0; 
    function dragstarted(d) { 
     d3.event.sourceEvent.stopPropagation(); 
     d3.select(this).classed("dragging", true); 
     startx = obj.ax.x(d[0]); 
     starty = obj.ax.y(d[1]); 
    } 
    var endx = 0; 
    var endy = 0; 
    function dragended(d) { 
     d3.select(this).classed("dragging", false); 
     endx = obj.ax.x(d[0]); 
     endy = obj.ax.y(d[1]); 
     alert(endx-startx); 
     d3.select("input") 
      .attr("value",endx-startx) 
    } 

마우스 클릭시 및 해제, 그것은 x 축과 경고 DIAG을 엽니 다 거리 여행. 이렇게하면 좌표 정보에 액세스 할 수 있습니다.

다음으로이 좌표 정보를 기본 html로 동적으로 인코딩 할 수 있는지 테스트하여 추가 백엔드 처리를 허용합니다. d3.js는 HTML 태그의 내용을 수정할 수 있음을 알게되었습니다. . 내가 때문에 특히 "plugins.py"와 같은 디렉토리에 _display.py (에서 "신사 템플릿"을 수정, 나는 템플릿에 다음을 입력 :

<table width=300 height=200 border=5> 
<tr> 
    <form method="POST" action="/plot" class=""> 
    <input type="submit" name="submit" value="PLOT"> 
    </form> 
</tr> 
</table> 

을하고 "drag_points.py을"수정 대신 경고 상자를 여는 그래서 그것은 endx-의 startx를 위해 "POST"에서 "입력"값의 값을 수정. 즉, 볼을 끌어 놓을 때

 d3.select("input") 
      .attr("value",endx-startx) 

최종 결과였다 경고 박스는 x- 변위를 표시하고이 값은 "입력"버튼의 값을 업데이트하는 데 사용됩니다. 입력 버튼 이외의 다른 태그를 사용하여 값을 설정하면 다운 스트림 정보를 기울이십시오.