9

したがって、これはやや似ています

Web 上で Python スクリプトの出力を取得する最も簡単な方法は何ですか? および Matplotlib: Web サーバー上のインタラクティブなプロット

しかし、それらのどれも d3.js を使用しておらず、同じレベルのインタラクティブ性を達成しているとは思いません。

したがって、私は d3.js の初心者であり、率直に言って、このインスタンスでどこから始めればよいかわかりません。

プロジェクトの流れ:

  1. フロントエンドでユーザー名を尋ねます。これをバックエンド python に送信します
  2. x の深さのグラフ データ (オブジェクト + エッジ) を取得します。x は、サード パーティの Web サイト API への Python 呼び出しによって、開始ノードからの距離です。
  3. データに対して機械学習を実行します (python)
  4. d3.js ループでグラフ + いくつかの数値 (おそらく右下隅) を表示します。
  5. ノードをクリックすると、それを開始ノードとして計算をやり直すように、インタラクティブな d3.js グラフを用意します。
  6. d3.js が各ノードのテキストの一部 (最初の 10 文字?) を表示し、マウスオーバーするとテキスト全体が表示されるようにします。

(7) おまけ更新埋め込み絵？それらのプロフィール署名が好きですか？

質問: この双方向通信を実現するにはどうすればよいですか? どこから始めればよいですか？これを行うためのより良い方法はありますか？

補足: Google App Engine を使用してこのプロジェクトを実行する予定ですが、「vm」として使用できるかどうかはわかりません。

ありがとう！

編集: これはPython のバックエンド JS とフロントエンドの統合によく似ていますが、どこから始めればよいかわかりません。彼のプロジェクトの結果として、よりアート指向のツールが提案されていると思います。

4

2 に答える 2

13

JSONを消費して返すWebサービスをPythonで作成する必要があるようです。データがクライアントから発信されているのかサーバーから発信されているのかわからないため、この例では、データがクライアントからのものであると想定しています。

  1. グラフデータをJSON形式でWebサービスにPOSTします
  2. サーバー側で処理を行う
  3. 処理の結果を表すJSONをクライアントに返します
  4. d3.jsでレンダリングします
  5. クライアントでのユーザー操作により、新しいデータ構造または変更されたデータ構造が作成されます
  6. 手順1に戻ります

サーバー側のWebサービスメソッドは次のようになります（これはweb.pyに基づく擬似コードです）。

import simplejson

class ml(object):

    def POST(self,data=None):
        # turn the JSON string into a Python data structure
        d = simplejson.loads(data)
        # do stuff
        results = alter_data(d)
        web.header('Content-Type','application/json')
        # send JSON back to the client
        return simplejson.dumps(results)

また、クライアント側のコードは次のようになります（ここでも大まかなスケッチです）。この例では、jQueryを使用してAJAXを実行していることを前提としています。

function render(data,textStatus) {
    d3
      .select('svg')
      .selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .on('click',function() {
          $.getJSON(
              'your_webservice_url',
              // POST an updated data structure to your service
              { 'data' : alter_data(data) },
              // Call the render method again when new data is received
              render);
       });
}

d3.js'enterとexitメソッドを使用すると、データの視覚的表現を非常に簡単に更新できます。それらのドキュメントを読むことをお勧めします。

この例では、JSONを使用してグラフデータを表現する方法と、それをレンダリングする方法についていくつかのアイデアが得られる場合があります。

onノードがクリックされたときにWebサービスへのPOSTをトリガーする方法については、メソッドを確認してください。

d3.jsでテキストを表示するなど、本当に具体的なものはスキップします。d3.jsのドキュメントを熟読することで、その方法を理解できると確信しています。

于 2012-10-26T21:18:59.560 に答える
1

これは遅い答えであり、私はこのpythonパッケージに出くわしました: Bokeh

要件のポイント 1 ～ 6 をカバーするには、Java スクリプトの作成に慣れていない人にとってプラスになる Python コードを作成するだけでよいようです。

しかし、このパッケージはまだ非常に新しく、現時点ではまだ気付いていないいくつかの制限がある可能性があります。

于 2015-12-10T12:06:44.460 に答える