例によるフラスコ-D3を使用したカスタム角度ディレクティブ

例によるフラスコ-D3を使用したカスタム角度ディレクティブ

*お帰りなさい。 読み込みスピナーとリファクタリングされたAngularコントローラーとともにAngularをセットアップしたら、最終パートに進み、カスタムAngularディレクティブを作成して、JavaScriptとhttps://d3js.org/[D3]ライブラリーで頻度分布チャートを表示しましょう。 *

要確認:これが私たちが構築しているものです-指定されたURLのテキストに基づいて単語と頻度のペアを計算するFlaskアプリです。

  1. link:/flask-by-example-part-1-project-setup/[Part One]:ローカル開発環境をセットアップしてから、ステージング環境と実稼働環境の両方をHerokuにデプロイします。

  2. link:/flask-by-example-part-2-postgres-sqlalchemy-and-alembic/[Part Two]:PostgreSQLデータベースをSQLAlchemyおよびAlembicと一緒にセットアップして、移行を処理します。

  3. link:/flask-by-example-part-3-text-processing-with-requests-beautifulsoup-nltk/[Part Three]:バックエンドロジックを追加して、Webページからワードカウントをスクレイピングしてから処理します。要求、BeautifulSoup、およびNatural Language Toolkit(NLTK)ライブラリ。

  4. link:/flask-by-example-implementing-a-redis-task-queue/[Part Four]:テキスト処理を処理するRedisタスクキューを実装します。

  5. link:/flask-by-example-integrating-flask-and-angularjs/[Part Five]:フロントエンドでAngularをセットアップし、バックエンドを継続的にポーリングしてリクエストが処理されたかどうかを確認します。

  6. link:/updating-the-staging-environment/[Part Six]:Herokuのステージングサーバーにプッシュする-Redisを設定し、1つのDynoで2つのプロセス(Webとワーカー)を実行する方法を詳しく説明します。

  7. link:/flask-by-example-updating-the-ui/[Part Seven]:フロントエンドを更新して、よりユーザーフレンドリーにします。 .* パート8:カスタムの角度ディレクティブを作成して、JavaScriptとD3を使用して頻度分布図を表示します。 (電流) *

コードが必要ですか? repoから入手してください。

現在あるものを見てみましょう…

現在のユーザーインターフェイス

ターミナルウィンドウでRedisを起動します。

$ redis-server

次に、プロセスワーカーを別のウィンドウに移動します。

$ cd flask-by-example
$ python worker.py
17:11:39 RQ worker started, version 0.4.6
17:11:39
17:11:39* * *Listening on default...

最後に、3番目のウィンドウでアプリを起動します。

$ cd flask-by-example
$ python manage.py runserver

ワードカウンターが機能していることがわかります。 これで、カスタムのAngular Directiveを追加して、結果をD3チャートに表示できます。

角度指令

まず、D3ライブラリ(https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md[v3])を_index.html_ファイルに追加します。

<!-- scripts -->
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="{{ url_for('static', filename='main.js') }}"></script>

それでは、新しいカスタムディレクティブを設定しましょう。

Angular DirectivesはDOM要素のマーカーであり、特定のイベントと属性が付加されたHTMLのセクションを挿入できます。 _main.js_のコントローラーのすぐ下に次のコードを追加して、ディレクティブの最初の部分を作成しましょう。

.directive('wordCountChart', ['$parse', function ($parse) {
  return {
    restrict: 'E',
    replace: true,
    template: '<div id="chart"></div>',
    link: function (scope) {}
   };
}]);

`+ restrict: 'E' `は、HTML要素に制限されるディレクティブを作成します。 ` replace:true `は、単にHTMLディレクティブを ` template `のHTMLに置き換えます。 ` link +`関数は、コントローラーで定義されたスコープ内の変数へのアクセスを提供します。

次に、変数の変更を「監視」するために「+ watch 」関数を追加し、適切に応答します。 これを次のように ` link +`関数に追加します:

link: function (scope) {
  scope.$watch('wordcounts', function() {
   //add code here
  }, true);
}

最後に、 `+ <div class =" row "> +`の終了区分のすぐ下にディレクティブを追加します。

<br>
<word-count-chart data="wordcounts"></word-count-chart>

ディレクティブを設定したら、D3ライブラリに注目しましょう…

D3棒グラフ

D3は、HTML、CSS、およびSVGを使用してDOMおよびJavaScriptにデータを表示し、インタラクティブにするための強力なライブラリです。 これを使用して基本的な棒グラフを作成します。

ステップ1:機能ロジック

Angular Directive内の `+ watch +`関数に次を追加します。

scope.$watch('wordcounts', function() {
  var data = scope.wordcounts;
  for (var word in data) {
    d3.select('#chart')
      .append('div')
      .selectAll('div')
      .data(word[0])
      .enter()
      .append('div');
  }
}, true);

これで、 `+ scope.wordcounts `が変更されるたびに、この関数が起動され、DOMが更新されます。 AJAXリクエストからオブジェクトが返されるため、特定のデータをチャートに追加するためにオブジェクトを反復処理します。 基本的に、すべての単語はhttps://bost.ocks.org/mike/join/[data join]を介して新しい ` div +`に追加されます。

コードを実行してみてください。

何が起こるのですか? 何も表示されませんよね? 新しいサイトを送信した後、Chromeの開発者ツールでDOMを確認してください。 ネストされた多数の `+ divs +`が表示されるはずです。 スタイルを追加するだけです…

ステップ2:棒グラフのスタイル設定

いくつかの簡単なCSSから始めます。

#chart {
  overflow-y: scroll;
}

#chart {
  background: #eee;
  padding: 3px;
}

#chart div {
  width: 0;
  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

#chart div {
  height: 30px;
  font: 15px;
  background-color: #006dcc;
  text-align: right;
  padding: 3px;
  color: white;
  box-shadow: 2px 2px 2px gray;
}

Bootstrapスタイルシートの後に、これをHTMLページの上部に必ず含めてください。

<link rel="stylesheet" type="text/css" href="../static/main.css">

ブラウザでアプリを起動します。 いま何が起きているのですか?

Webサイトを検索すると、灰色の領域が表示され、左側にいくつかの細い青いバーが表示されます。 返されたデータ要素ごとにバーが生成されていることがわかります-合計で10です。 ただし、各バーの幅を広げて読みやすくするために、D3コードを変更する必要があります。

ステップ3:棒グラフをよりインタラクティブにする

これを既存のコードにチェーンし、D3 style関数を使用できます。

scope.$watch('wordcounts', function() {
  var data = scope.wordcounts;
  for (var word in data) {
    d3.select('#chart')
      .append('div')
      .selectAll('div')
      .data(word[0])
      .enter()
      .append('div')
      .style('width', function() {
        return (data[word]* 20) + 'px';
      })
      .text(function(d){
        return word;
      });
  }
}, true);

これで、Webページに単語が表示される頻度の数値に基づいて動的に幅を作成しています。

.style('width', function() {
  return (data[word] * 20) + 'px';
})
.text(function(d){
  return word;
});

スタイルは、各単語に関連付けられた値を返し、その数値に20を掛けてから、ピクセルに変換することで計算されます。 また、単語の文字列値とページに表示される頻度を挿入することにより、各バー要素にテキストを追加することもできます。

これを試してみてください。 次のようなものが見えるはずです。

まだ一つ欠けていることがあります。 新しいWebサイトを検索するとどうなりますか? それを試してみてください。 新しいグラフが前のグラフの下に追加されます。 新しいチャートdivを作成する前に、チャートdivをクリアする必要があります。

ステップ4:次のURL検索のためにクリーンアップする

ディレクティブの `+ link +`関数を更新します:

link: function (scope) {
  scope.$watch('wordcounts', function() {
    d3.select('#chart').selectAll('*').remove();
    var data = scope.wordcounts;
    for (var word in data) {
      d3.select('#chart')
        .append('div')
        .selectAll('div')
        .data(word[0])
        .enter()
        .append('div')
        .style('width', function() {
          return (data[word] * 20) + 'px';
        })
        .text(function(d){
          return word;
        });
    }
  }, true);
}

`+ d3.select( '#chart')。selectAll( '*')。remove(); `は、 ` $ scope.watch +`関数が起動されるたびにチャートをクリアします。 これで、新しい使用のたびにクリアされるチャートがあり、完全に機能するワードカウントアプリケーションがあります!!

試してみる

結論と次のステップ

それでおしまい。 変更をステージングサーバーと運用サーバーにプッシュします。 取り組んだ内容を確認しましょう。

  1. 構成とワークフローから始め、ステージングサーバーと運用サーバーをセットアップしました

  2. そこから、基本機能(Webスクレイピング、データ分析)を追加し、Redisを使用してタスクキューを設定しました

  3. バックエンド機能を設定したら、Angularを追加し、カスタムディレクティブを作成し、D3をミックスに追加したフロントエンドに注目しました

MVPがありますが、まだやるべきことがあります。

  1. リファクタリング、リファクタリング、リファクタリング!

  2. テストの作成

  3. エラーと例外を処理する

  4. サービスへのAngularアプリの状態を抽象化する

  5. UIとUXで作業する

助けたい? 機能を追加し、パート9を記述してhttps://realpython.com/write/[paid]を取得し、インターネットで有名になりましょう!

リンク集