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

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

お帰りなさい。 AngularをロードスピナーとリファクタリングされたAngularコントローラーとともにセットアップしたら、最後の部分に進み、JavaScriptとD3ライブラリを使用して度数分布チャートを表示するカスタムAngularディレクティブを作成しましょう。

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

  1. Part One:ローカル開発環境をセットアップしてから、ステージング環境と本番環境の両方をHerokuにデプロイします。

  2. Part Two:移行を処理するためにSQLAlchemyおよびAlembicとともにPostgreSQLデータベースをセットアップします。

  3. Part Three:バックエンドロジックを追加して、リクエスト、BeautifulSoup、Natural Language Toolkit(NLTK)ライブラリを使用して、ウェブページから単語数を取得して処理します。

  4. Part Four:テキスト処理を処理するためのRedisタスクキューを実装します。

  5. Part Five:フロントエンドでAngularを設定して、バックエンドを継続的にポーリングし、リクエストの処理が完了したかどうかを確認します。

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

  7. Part Seven:フロントエンドを更新して、よりユーザーフレンドリーにします。

  8. パート8:JavaScriptとD3を使用して度数分布図を表示するカスタムAngularディレクティブを作成します。 (current

コードが必要ですか? 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ライブラリ(v3)をindex.htmlファイルに追加することから始めます。






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

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

.directive('wordCountChart', ['$parse', function ($parse) {
  return {
    restrict: 'E',
    replace: true,
    template: '
', 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">に追加します。


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

D3棒グラフ

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

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

Angularディレクティブ内の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リクエストからオブジェクトが返されるため、特定のデータをチャートに追加するためにオブジェクトを反復処理します。 基本的に、すべての単語は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ページの上部に必ず含めてください。

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

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

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

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

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を掛けてから、ピクセルに変換することで計算されます。 また、単語の文字列値とページに表示される頻度を挿入することにより、各バー要素にテキストを追加することもできます。

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

Chart: word count and frequencies

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

ディレクティブの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. Refactor、リファクタリング、リファクタリング!

  2. テストを書く

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

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

  5. UIとUXで作業する

助けたい? 機能を追加し、パート9を作成して、paidを取得し、インターネットで有名になりましょう。

リンク集