5

IPython Notebook には、インタラクティブな matplotlib-plots 用の素晴らしい mpld3 があります。mpld3 にはプラグインもあります。1 つは私にとって特に興味深いものです。プロット内のポイントを選択してドラッグすることができます。ここに表示されます。

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

リンクのソース コードは、以下のプロットを生成します。ポイントをドラッグしたプラグインから情報を取得したいと思います。しかし、私は JavaScript の部分とそこから情報を取得する方法に本当に迷いました。

ここで、いくつかの点を新しい位置にドラッグしました。 それらをドラッグした場所に関する情報を取得したいと思います。

4

1 に答える 1

3

私はこれについて疑問に思っており、同様のことをしたいと思っていました。これが私が見つけたものです。まず、マウスの座標を知りたいと思いました。座標を読み取れるようにするために、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 距離が移動したアラート診断が開きます。これにより、座標情報にアクセスできます。

次に、この座標情報を基になる html に動的にエンコードできるかどうかをテストしました。これにより、さらにバックエンド処理が可能になります。d3.js では html タグの内容を変更できることを知りました。したがって、_display.py (「plugins.py」と同じディレクトリにあります) の「jinja テンプレート」を変更しました。具体的には、テンプレートに次のように入力しました。

<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」を変更して、アラート ボックスを開く代わりに、「input」値の値を「post」から endx-startx に変更しました。あれは、

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

最終結果は、ボールをドラッグして離すと、アラート ボックスに x 変位が表示され、この値を使用して「入力」ボタンの値が更新されました。入力ボタン以外のタグを使って値を設定すれば、下流で情報を活用できるはずです。

于 2014-08-05T03:27:28.140 に答える