オープンソースの冒険:エピソード30:ロシアのタンクの損失を視覚化するD 3と小包を使用する

14866 ワード
d3 javascript テキストリンク
前のエピソードでは、私はD 3を使用して任意のツールを使用せずに簡単なグラフを作成します.もっとモダンにしましょう.

新しいアプリを作る


多くの異なったバンドルがあります、そして、それらの大部分は若干の痛い構成を必要とします.
それがちょうど箱から働くことを約束するので、今度は parcel をためしましょう.
$ npm init -y
$ npm install d3 parcel
それはそれが約束することを全くしません、しかし、それはまだWebpackまたはrolulupであるより少ない構成です.

Githubページのための小包構成


小包を持つ最初の問題は、絶対パスですべてを出力するので、あなたのアプリケーションは、ドメインのトップレベルでそれをホストする場合のみ動作します.
これはどのようにgithubページが設定されていない、全体的にひどいデフォルトです.デフォルトは相対パスでなければなりません.そのためには--public-url .にparcelを渡す必要があります.

パッケージ。JSON


二つのことを変える必要がある.エントリをsourceに設定します.そして、私たちが相対的なURLが欲しいという小包を教えてください.
{
  "name": "episode-30",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "parcel:build": "parcel build --public-url ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "d3": "^7.4.2",
    "parcel": "^2.4.1"
  },
  "source": "src/index.html"
}
それは、我々の包み問題のほとんど終わりです.

src / indexHTML


ここでは2つのスクリプトを1つに減らすことができます.我々は、それを動作させるtype="module"注釈を追加する必要があります.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="app.css">
  </head>
  <body>
    <h1>Russian Tank Losses</h1>
    <script src="app.js" type="module"></script>
  </body>
</html>

src / appCSS


前のバージョンから変更されません.
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

src / appjs


そしてもう一つの包み問題.デフォルトでは、ビルドディレクトリに.csvファイルのような静的資産をコピーしません.これに多くの解決策があります-我々がそれを使用している方法は、我々が望む資産のurl:を輸入することによってあります.
全体的に、3つのラインだけが前のエピソードのバージョンから変わりました.
最初に、我々は、import * as d3 from "d3"でD 3を輸入する必要があります.私たちはちょうどimport {csv, scaleLinear, scaleTime, extent, select, axisBottom, axisLeft, line} from d3のような特定の機能をインポートすることもできました、しかし、D 3 APIは本当にそれのためにつくられませんでした、そして、私はそれを推薦しません.
第2に、我々のcsvがバンドルを必要とするということを小包に知らせる必要があります.csvUrlは、適切なハッシュで包みのURLになります.これは資産を行う唯一の方法ではありません.
そして、csvUrlとlet data = await d3.csv(csvUrl, parseRow)を使う必要があります.
何も変更を必要とした.
import * as d3 from "d3"
import csvUrl from 'url:./russia_losses_equipment.csv'

let parseRow = ({date,tank}) => ({date: new Date(date), tank: +tank})

let main = async () => {
  let data = await d3.csv(csvUrl, parseRow)
  data.unshift({date: new Date("2022-02-24"), tank: 0})

  let xScale = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, 600])

  let yScale = d3.scaleLinear()
    .domain(d3.extent(data, d => d.tank))
    .range([400, 0])

  let svg = d3.select("body")
    .append("svg")
      .attr("width", 800)
      .attr("height", 600)
    .append("g")
      .attr("transform", "translate(100, 100)")

  svg.append("g")
    .call(d3.axisLeft(yScale))

  svg.append("g")
    .attr("transform", "translate(0, 400)")
    .call(d3.axisBottom(xScale))

  svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "red")
    .attr("stroke-width", 1.5)
    .attr("d", d3.line()
      .x(d => xScale(d.date))
      .y(d => yScale(d.tank)))
}

main()

小包は使えますか。


Parcelはコンフィグレーションのバンドルを全くしていませんでした、そして、ハッシュをオフにするのが不可能であるように、いくつかの迷惑なものがあります(--no-content-hashは静的ハッシュでコンテンツハッシュをちょうど置き換えます)、しかし、それはまだ他のJavaScriptバンドルの上で大きな改善です.
あなたがSvelteのようなフレームワークを使用するか、反応するならば、あなたはすでにバンドル・セットアップを持っているので、あなたは多分ちょうどそれを使うべきです.しかし、あなたがそうしないならば、小包はたった今最高の低い設定解決であるかもしれません.

今までの話


私は、githubページ(you can see it here)でこれを配備しました.

今度来る


次のエピソードでは、我々はsvelteにこのアプリをポートします.そしてその後、ロシアが戦車から逃れるまでどのくらいの期間を見つけようとします.
[白俊]#10282ハッカー
CentOSベースのNagiosのインストール