この記事では、最近構(gòu)築したプロジェクトの例をご覧ください。D3ライブラリを使用した

完全にオリジナルの視覚化の種類(lèi)をご覧ください。學(xué)ぶのに最適な図書(shū)館。 D3は、データ駆動(dòng)型のドキュメントを表しています。これは、あらゆる種類(lèi)の素晴らしいデータの視覚化とチャートを作成するために使用できるJavaScriptライブラリです。

The New York Timesの素晴らしいインタラクティブなストーリーを見(jiàn)たことがあるなら、D3が実際に動(dòng)いているのを見(jiàn)たことがあります。また、ここでD3で構(gòu)築された?jī)?yōu)れたプロジェクトのクールな例をいくつか見(jiàn)ることができます。 D3には、おそらくこれまで見(jiàn)たことのないいくつかの特別な癖があるため、

學(xué)習(xí)曲線はライブラリを始めるためにかなり急です。ただし、學(xué)習(xí)の最初の段階を十分に超えてD3を危険にさらすことができれば、すぐに自分のために本當(dāng)にクールなものを作ることができます。

他のライブラリからD3を際立たせる3つの主な要因があります：

1. 柔軟性。 D3では、あらゆる種類(lèi)のデータを取得し、ブラウザウィンドウの形狀に直接関連付けることができます。このデータは、絶対に何でも優(yōu)雅さ。アップデート間の滑らかな遷移
を備えたインタラクティブな要素を簡(jiǎn)単に追加できます。ライブラリは美しく書(shū)かれています
2. 、そして構(gòu)文のハングを取得したら、コードを清潔で整頓するのは簡(jiǎn)単です。 コミュニティ。 D3を使用している素晴らしい開(kāi)発者の広大なエコシステムがすでにあり、コードをオンラインで簡(jiǎn)単に共有しています。 bl.ocks.orgやblockbuilder.orgなどのサイトを使用して、他の人が事前に作成したコードをすばやく見(jiàn)つけ、これらのスニペットを自分のプロジェクトに直接コピーできます。 キーテイクアウト
データ駆動(dòng)型のドキュメントの立場(chǎng)にある
3. D3は、ニューヨークタイムズのようなプラットフォームでの広範(fàn)な使用によって実証されているように、多様でインタラクティブなデータの視覚化を作成するための強(qiáng)力なJavaScriptライブラリです。
ライブラリは比類(lèi)のない柔軟性を提供し、開(kāi)発者があらゆる種類(lèi)のデータをブラウザで直接グラフィカルな表現(xiàn)に結(jié)合できるようにし、視覚化デザインの創(chuàng)造性を促進(jìn)します。

D3は、スムーズな移行を伴うインタラクティブでダイナミックな要素を追加し、エレガントなプログラミングと構(gòu)文を通じて視覚體験とユーザーエンゲージメントを高めることに優(yōu)れています。

開(kāi)発者の堅(jiān)牢なコミュニティはD3をサポートし、BL.OCKS.ORGなどのプラットフォームで共有コードと例の豊富なリソースを提供します。

チュートリアルでは、D3の能力を利用してデータを動(dòng)的に操作および提示するための革新的な視覚化の作成を詳述し、実際のデータ値に基づいてPIEチャートRadiiのような視覚要素を調(diào)整します。

プロジェクトは、既存のコードを借用と適応させ、D3の適応性とコーディングにおけるコミュニティの重要性を?qū)g証することで、動(dòng)的でインタラクティブな機(jī)能強(qiáng)化に移行することで繰り返し開(kāi)発されました。
• 最終的なインタラクティブな視覚化には、プレイ/一時(shí)停止ボタンや1年選択のスライダーなどの機(jī)能が含まれており、D3を使用してデータの視覚化を有益であるだけでなく魅力的にする方法を示しています。
• プロジェクト
• 大學(xué)の経済學(xué)専攻として、私は常に所得の不平等に興味を持っていました。私はこのテーマについていくつかのクラスを受講しましたが、それがそうあるべき程度に完全には理解されていないものとして私を襲った。
Googleのパブリックデータエクスプローラーを使用して所得の不平等を調(diào)査し始めました…

• インフレに合わせて調(diào)整すると、世帯収入は社會(huì)の下位40％で

  が

  であり、労働者ごとの生産性は急増しています。より多くのメリットを獲得したのは、実際に

  上位20％

  でした（そして、そのブラケット內(nèi)では、上位5％を見(jiàn)ると違いはさらに衝撃的です）。

  ここに私が説得力のある方法で伝えたいメッセージがありました。 スケッチ

  私たちはd3で作業(yè)しているので、私は多かれ少なかれ、私が考えることができる絶対に何でも

  スケッチを始めることができました。シンプルな折れ線グラフ、バーチャート、またはバブルチャートを作成するのは簡(jiǎn)単だったでしょうが、違うものを作りたかったのです。 人々が不平等に関する懸念の反論として使用する傾向がある最も一般的な類(lèi)推は、「パイが大きくなった場(chǎng)合、それ以上は回る」ということです。直感は、GDPの総シェアが大幅に増加することに成功した場(chǎng)合、たとえ一部の人々がパイのより薄いスライスを取得している場(chǎng)合でも、彼らはまだ。しかし、私たちが見(jiàn)ることができるように、パイが全體的に少なくなっているとがより大きくなることは完全に可能です。 このデータを視覚化するための私の最初のアイデアは次のように見(jiàn)えました：

  アイデアは、この脈動(dòng)するパイチャートがあり、各スライスが米國(guó)の収入分布の5分の1を表しているということです。各パイスライスの面積は、人口のセグメントがどれだけの収入を得ているかに関連しており、チャートの総面積はGDPの合計(jì)を表します。

  しかし、私はすぐにちょっとした問(wèn)題に出くわしました。人間の脳は、異なる領(lǐng)域のサイズを區(qū)別するのに非常に貧弱であることがわかります

  。私がこれをより具體的にマッピングしたとき、メッセージは本來(lái)あるべきほど明白ではありませんでした：

  ここで、実際には、最も貧しいアメリカ人が時(shí)間とともに

  豊かに

  を取得しているように見(jiàn)えます。私はこの問(wèn)題についてもう少し考えましたが、私の解決策には、各アークの角度を一定に保つことが含まれ、各アークの半徑は動(dòng)的に変化します。
  これが実際に見(jiàn)えるようになった方法です：

  

  この畫(huà)像は、ここで効果を控えめにする傾向があることを指摘したいと思います。単純なバーチャートを使用した場(chǎng)合、効果はより明白でした：

  

  しかし、私はユニークな視覚化を行うことにコミットしていました、そして、私はこのメッセージを家に持ち帰りたかったのですが、pieはを得ることができますが、そのは小さくなることがあります。今、私は自分の考えを持っていたので、D3でそれを構(gòu)築する時(shí)が來(lái)ました。 貸付コード

  だから、自分が何を構(gòu)築しようとしているのかがわかったので、このプロジェクトの本當(dāng)の肉に入り、
  。

  最初の數(shù)行のコードをゼロから書(shū)くことから始めると思うかもしれませんが、あなたは間違っているでしょう。これはD3であり、D3で作業(yè)しているため、コミュニティから事前に書(shū)かれたコードをいつでも見(jiàn)つけることができます。 私たちはまったく新しいものを作成していますが、通常のパイチャートと多くの共通點(diǎn)があるので、bl.ocks.orgを簡(jiǎn)単に見(jiàn)てみました。 D3の作成者の1人。このファイルはおそらくすでに何千回もコピーされており、それを書(shū)いた人はJavaScriptの本物のウィザードなので、すでにコードの素晴らしいブロックから始めていることを確認(rèn)できます。 このファイルはD3 V3で記述されています。これは、バージョン5が先月最終的にリリースされたため、現(xiàn)在では2つのバージョンであります。 D3 V4の大きな変化は、ライブラリがフラットネームスペースの使用に切り替えたため、d3.scale.ordinal（）のようなスケール機(jī)能は、代わりにd3.scaleordinal（）のように書(shū)かれていることでした。バージョン5では、最大の変更は、データ読み込み関數(shù)が約束として構(gòu)成されているため、複數(shù)のデータセットを一度に処理しやすくすることでした。

  混亂を避けるために、私はすでにこのコードの更新されたV5バージョンを作成するのに苦労しました。また、ES5匿名関數(shù)をArrow関數(shù)に切り替えるなど、ES6コンベンションに適合するように構(gòu)文を変換しました。

  これが私たちがすでに始めていることです：

  次に、これらのファイルをワーキングディレクトリにコピーし、自分のマシンですべてを複製できるようにしました。このチュートリアルを自分でフォローしたい場(chǎng)合は、GitHubリポジトリからこのプロジェクトをクローンできます。ファイルStarter.htmlのコードから始めることができます。このコードを?qū)g行するためにサーバー（このようなものなど）が必要になることに注意してください。

  このコードがどのように機(jī)能しているかを簡(jiǎn)単に説明させてください。

  コードを歩く

  最初に、ファイルの上部にいくつかの定數(shù)を宣言しています。これを使用して、パイチャートのサイズを定義します。

  これにより、コードが非常に再利用可能になります。なぜなら、それを大きくしたり小さくしたいのであれば、ここでこれらの値を変更することを心配する必要があるからです。

  次に、SVGキャンバスを畫(huà)面に追加します。 SVGについてあまり知らない場(chǎng)合は、キャンバスをページ上のスペースを描くことができるスペースとして考えることができます。この領(lǐng)域の外側(cè)にSVGを描畫(huà)しようとすると、畫(huà)面に表示されません：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  d3.select（）への呼び出しを使用して、チャートエリアのIDを使用して空のdivを手に入れています。また、D3.Append（）メソッドを使用してSVGキャンバスを取り付けており、d3.attr（）メソッドを使用して幅と高さにいくつかの寸法を設(shè)定しています。 また、このキャンバスにSVGグループ要素を添付しています。これは、要素を一緒に構(gòu)築するために使用できる特別なタイプの要素です。これにより、グループ要素の変換屬性を使用して、視覚化全體を畫(huà)面の中心にシフトできます。 その後、パイのすべてのスライスに新しい色を割り當(dāng)てるために使用するデフォルトのスケールを設(shè)定しています：

  次に、D3のパイレイアウトをセットアップするいくつかの行があります：

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  D3では、レイアウトはデータセットで呼び出すことができる特別な関數(shù)です。レイアウト関數(shù)は、特定の形式で一連のデータを取り入れ、自動(dòng)的に生成された値を使用して

  変換された配列を吐き出します。

  次に、アークを描くために使用できるパスジェネレーターを定義する必要があります。パスジェネレーターを使用すると、WebブラウザでPATH SVGSを描畫(huà)できます。 D3が実際に行うのは、畫(huà)面上のデータの形狀を形成することだけですが、この場(chǎng)合、単純な円や正方形よりも複雑な形狀を定義したいと考えています。 PATH SVGは、その間に描かれるラインのルートを定義することにより機(jī)能します。これは、そのD屬性で定義できます。 これがこれがどのように見(jiàn)えるかもしれませんか：

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  d屬性には、ブラウザが必要なパスを描畫(huà)できる特別なエンコードが含まれています。この文字列の意味を本當(dāng)に知りたい場(chǎng)合は、MDNのSVGドキュメントでそれについて知ることができます。 D3でのプログラミングの場(chǎng)合、この特別なエンコードについては何も知る必要はありません。これは、いくつかの単純なパラメーターで初期化する必要があるジェネレーターがあるためです。

  アークの場(chǎng)合、パスジェネレーターにピクセルの內(nèi)部段階と外radius値を與える必要があります。ジェネレーターは、私たちの各角度を計(jì)算する複雑な數(shù)學(xué)を整理します。
  チャートでは、innernradiusにゼロの値を使用しています。これにより、標(biāo)準(zhǔn)のパイチャートが表示されます。ただし、代わりにドーナツチャートを描きたい場(chǎng)合は、必要なのは、outourradius値よりも小さい値をプラグインすることだけです。

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  いくつかの関數(shù)宣言の後、d3.json（）関數(shù)を使用してデータにロードしています：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  D3バージョン5.xでは、d3.json（）への呼び出しが約束を返します。つまり、d3はjsonファイルのコンテンツを取得し、それを與える相対パスで見(jiàn)つけて、それを與える相対パスで見(jiàn)つけ、その関數(shù)を?qū)g行することを意味します。ロードされたら、當(dāng)時(shí)（）メソッドを呼び出します。その後、コールバックのデータ引數(shù)で見(jiàn)ているオブジェクトにアクセスできます。 また、ここに関數(shù)リファレンスを渡しています - タイプ - これは、私たちがロードするすべての値を數(shù)値に変換する予定です。
  console.log（data）を追加した場(chǎng)合; d3.jsonコールバックの上部への聲明、私たちが現(xiàn)在取り組んでいるデータを見(jiàn)ることができます：

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  データはここで2つの異なる配列に分割され、それぞれリンゴとオレンジのデータを表しています。

  この行を使用すると、ラジオボタンの1つがクリックされるたびに見(jiàn)ているデータを切り替えます：

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  また、視覚化の最初の実行でupdate（）関數(shù)を呼び出し、初期値（「リンゴ」アレイを使用して）を通過(guò)する必要があります。
  アップデート（）関數(shù)が何をしているかを見(jiàn)てみましょう。 D3に慣れていない場(chǎng)合、D3の最も難しい部分の1つであるため、これは混亂を引き起こす可能性があります…

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  まず、値に対してデフォルトの関數(shù)パラメーターを使用しています。更新（）関數(shù)に引數(shù)を渡す場(chǎng)合（初めて実行しているとき）、その文字列を使用します。私たちの無(wú)線入力。
  次に、D3の一般的な更新パターン

  <span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
  </span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
  </span><span><span><span></svg</span>></span>
  </span>

  を使用して、アークの動(dòng)作を処理します。これには通常、データ結(jié)合の実行、古い要素の終了、畫(huà)面上の既存の要素の更新、データに追加された新しい要素の追加が含まれます。この例では、畫(huà)面に常に同じ數(shù)のパイスライスがあるため、要素の終了を心配する必要はありません。

  最初に、データが參加しています：

  <span>const arc = d3.arc()
  </span>  <span>.innerRadius(0)
  </span>  <span>.outerRadius(radius);
  </span>

  視覚化が更新されるたびに、これにより、新しい一連のデータが畫(huà)面上のSVGと関連付けられています。データ（「リンゴ」または「オレンジ」の配列のいずれか）をpie（）レイアウト関數(shù)に渡しています。これは、アークを描畫(huà)するために使用できるいくつかの開(kāi)始角と端の角度を計(jì)算しています。このパス変數(shù)には、畫(huà)面上のすべてのアークの特別な

  仮想選択

  が含まれるようになりました。 次に、データアレイにまだ存在する畫(huà)面上のすべてのSVGを更新します。ここでトランジションを追加します - D3ライブラリの素晴らしい機(jī)能 - これらの更新を200ミリ秒以上拡大します：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  d3.transition（）呼び出しでattrttione（）メソッドを使用して、d3が各アークの位置を更新するために使用するカスタム遷移を定義しています（D屬性を使用して遷移）。ほとんどの屬性に移行を追加しようとしている場(chǎng)合、これを行う必要はありませんが、異なるパス間の移行のためにこれを行う必要があります。 D3はカスタムパス間を移行する方法を?qū)g際に把握できないため、ARCTWEENE（）関數(shù)を使用して、D3にそれぞれのパスをどのように描畫(huà)するかを毎回描畫(huà)する方法を知らせています。

  この関數(shù)がどのように見(jiàn)えるかは次のとおりです
  ここではd3.interpolate（）を使用して、インタープロレーターと呼ばれるものを作成しています。 0から1の間の値でi変數(shù)に保存する関數(shù)を呼び出すと、this._currentとaの間のどこかにある値を取り戻します。この場(chǎng)合、this._currentは、私たちが見(jiàn)ているパイスライスの開(kāi)始角と終了角を含むオブジェクトであり、aは更新している新しいデータポイントを表します。

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  インタープロレーターをセットアップしたら、this._current値を更新して、最後に持つ値（i（a（a））を含むと、計(jì)算する関數(shù)を返します。このt値に基づいて、私たちのアークが含めるべきパス。私たちの遷移は、クロックのすべてのティック（0?1の間の引數(shù)を渡す）でこの関數(shù)を?qū)g行します。このコードは、私たちの遷移がいつでもどこに描かれるべきかを知ることを意味します。

  最後に、更新（）関數(shù)は、以前のデータにない新しい要素を追加する必要があります。

  このコードのブロックは、この更新関數(shù)が最初に実行されるときに、各アークの初期位置を設(shè)定します。ここでのEnter（）メソッドは、畫(huà)面に追加する必要があるデータのすべての要素を提供します。その後、attr（）メソッドでこれらの各要素をループして、それぞれの充填と位置を設(shè)定できます。アーク。また、それぞれのアークに白い境界線を與えています。最後に、これらの各ARCのthis.currentプロパティをデータのアイテムの初期値として設(shè)定します。これをarctweene（）関數(shù)で使用しています。

  D3のかなり高度なトピックであるため、これがどのように機(jī)能しているかを正確にフォローできない場(chǎng)合でも心配しないでください。このライブラリの素晴らしいところは、強(qiáng)力なものを作成するためにその內(nèi)部のすべての仕組みを知る必要がないことです。変更する必要があるビットを理解できる限り、完全に不可欠ではない詳細(xì)を抽象化することは問(wèn)題ありません。

  それは私たちをプロセスの次のステップにもたらします…
  コードの適応

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  ローカル環(huán)境にコードがあり、それが何をしているのかを理解しているので、私たちが見(jiàn)ているデータを切り替えて、興味のあるデータで動(dòng)作するようにします。 。

  プロジェクトのデータ/フォルダーに操作するデータを含めました。この新しいincomes.csvファイルは今回はCSV形式であるため（Microsoft excelで開(kāi)くことができるファイルの種類(lèi)です）、d3.json（）の代わりにd3.csv（）関數(shù)を使用します（ ）関數(shù)：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  この関數(shù)は、基本的にd3.json（）と同じことを行います - データを使用できる形式に変換します。また、ここでは2番目の引數(shù)としてtype（）初期化関數(shù)を削除します。これは古いデータに固有のものだったからです。

  console.log（data）ステートメントをd3.csvコールバックの上部に追加すると、作業(yè)中のデータの形狀が表示されます。
  50個(gè)のアイテムの配列があり、各アイテムはデータに1年を表しています。その後、毎年、5つの収入グループのそれぞれのデータと他のいくつかの分野のデータがあります。ここでは、ここでパイチャートを作成できますが、最初に適切な形式になるように、データを少しシャッフルする必要があります。 D3と結(jié)合してデータを書(shū)きたい場(chǎng)合は、各アイテムがSVGに関連付けられる配列を渡す必要があります。

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  最後の例では、畫(huà)面に表示したいすべてのパイスライスにアイテムを備えた配列があったことを思い出してください。これを現(xiàn)時(shí)點(diǎn)で持っているものと比較してください。これは、描きたい各パイスライスを表す1?5のキーを持つオブジェクトです。 これを修正するために、reptedata（）という新しい関數(shù)を追加して、以前に持っていたtype（）関數(shù)を置き換えます。
  毎年、この関數(shù)は値配列を備えたオブジェクトを返し、データ結(jié)合に渡されます。これらの各値に名前フィールドにラベルを付けているので、すでに持っていた収入価値に基づいて數(shù)値を與えています。また、比較のために毎年の平均収入を追跡しています。

  この時(shí)點(diǎn)で、操作できる形式のデータがあります。

  データの最初の年のチャートを生成することから始めます。その後、殘りの年の間に更新することを心配します。

  現(xiàn)時(shí)點(diǎn)では、データは2015年に始まり、1967年に終了するため、他のことをする前にこの配列を逆にする必要があります。

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  通常のパイチャートとは異なり、グラフでは、各アークの角度を修正し、視覚化の更新として半徑を変更するだけです。これを行うには、パイレイアウトの値（）メソッドを変更して、各パイスライスが常に同じ角度を取得するようにします。

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  次に、視覚化が更新されるたびに半徑を更新する必要があります。これを行うには、使用できるスケールを作成する必要があります。スケールとは、2つの値の間に入力を取得するD3の関數(shù)であり、ドメインとして渡され、2つの異なる値の間で出力を吐き出します。範(fàn)囲として。使用するスケールは次のとおりです

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  データにアクセスできるようになったらすぐにこのスケールを追加し、入力はデータセットの最大値から最大値の範(fàn)囲であると言っています。これは昨年の最も豊かなグループからの収入ですデータ（データ[49] .Values [4] .Value）で。ドメインの場(chǎng)合、出力値が間に範(fàn)囲する間隔を設(shè)定しています。 これは、ゼロの入力がゼロのピクセル値を與える必要があることを意味し、データの最大値の入力は、幅または高さの半分の値の値を與える必要があります。 >

  ここでは

  平方根スケール

  を使用していることに注意してください。私たちがこれを行っている理由は、パイスライスの面積が半徑ではなく、各グループの収入に比例することを望んでいるからです。領(lǐng)域=πr

  2

  であるため、これを説明するには平方根スケールを使用する必要があります。 その後、このスケールを使用して、アップデート（）関數(shù)內(nèi)のARCジェネレーターのoutourradius値を更新できます。 データが変更されるたびに、それぞれのアークに使用する半徑値を編集します。 また、最初にアークジェネレーターを設(shè)定したときにアウターラディウスへの呼び出しを削除する必要があります。 最後に、この更新（）関數(shù)をいくつか編集する必要があります。そうすれば、すべてが新しいデータと一致するようにする必要があります。

  ラジオボタンを使用するつもりはもうないので、電話をかけて使用したい1年目のオブジェクトを通過(guò)するだけです。

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  最後に、フォーム入力用に設(shè)定したイベントリスナーを削除します。すべてが計(jì)畫(huà)に行った場(chǎng)合、データの最初の年には美しい見(jiàn)た目のチャートが必要です。
  動(dòng)的にする

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  次のステップは、異なる年の間に視覚化サイクルを持つことであり、収入が時(shí)間とともにどのように変化しているかを示すことです。これを行いますjavascriptのsetinterval（）関數(shù)を呼び出します。これを使用して、コードを繰り返し実行できます。

  この時(shí)間変數(shù)でタイマーを設(shè)定し、200msごとにこのコードがステップ（）関數(shù)を?qū)g行します。これにより、チャートが來(lái)年のデータに更新され、タイマーがタイマーの場(chǎng)合はタイマーをインクリメントします。値49（データの昨年）の値で、それ自體をリセットします。これにより、継続的に実行される素?cái)长圣氅`プが得られます。

  

  物事をもう少し便利にするために。また、生の數(shù)字を提供するいくつかのラベルも追加します。ファイルの本文にあるすべてのHTMLコードをこれに置き換えます：

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  ここでは、Bootstrapのグリッドシステムを使用してページを構(gòu)成しています。これにより、ページ要素をボックスにきちんとフォーマットできます。

  データが変更されるたびに、これらすべてをjQueryで更新します。

  また、ファイルの上部にあるCSSをいくつか編集します。これにより、各アークの凡例が表示され、見(jiàn)出しの中心になります。

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  私たちが終わらせるのは、かなり提示可能なものです：

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  ここでこれらのアークがどのように時(shí)間の経過(guò)とともに変化したかを見(jiàn)るのはかなり難しいので、いくつかのグリッドラインを追加して、データの最初の年に収入分布がどのように見(jiàn)えるかを示したいと思います。

  array.foreach（）メソッドを使用してこれを達(dá)成していますが、D3の通常の更新パターン

  を再度使用することもできました（join/exit/update/Enter）。 また、米國(guó)の平均収入を示すために行を追加したいと思います。これについては毎年更新します。まず、平均行を初めて追加します。
  その後、年が変更されるたびに更新（）関數(shù)の最後にこれを更新します：

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  これらのサークルのそれぞれを追加することが重要であることに注意する必要があります

  この時(shí)點(diǎn)で、私たちがもう少し明確に作業(yè)しているデータを伝えるものがあります：

  <span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
  </span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
  </span><span><span><span></svg</span>></span>
  </span>

  <span>const arc = d3.arc()
  </span>  <span>.innerRadius(0)
  </span>  <span>.outerRadius(radius);
  </span>

  インタラクティブにする

  最後のステップとして、ユーザーが特定の年に掘り下げられるように、いくつかのコントロールを追加してほしい。 の再生/一時(shí)停止ボタンと1年のスライダーを追加して、ユーザーが特定の日付を選択して見(jiàn)ることができるようにしたい。 これらの要素を畫(huà)面に追加するために使用するHTMLは次のとおりです。

  これらの両方の要素にイベントリスナーを追加して、探している動(dòng)作を設(shè)計(jì)する必要があります。

  最初に、私たちの

  Play/Pauseボタンの動(dòng)作を定義したいです。ボタンで停止してタイマーを起動(dòng)できるようにするために、以前に間隔のために書(shū)いたコードを置き換える必要があります。視覚化は「一時(shí)停止」?fàn)顟B(tài)で始まり、このボタンを押して物事をキックオフする必要があると仮定します。

  <span>const width = 540;
  </span><span>const height = 540;
  </span><span>const radius = Math.min(width, height) / 2;
  </span>

  ボタンがクリックされるたびに、ボタンが「再生」ボタンか「一時(shí)停止」ボタンであるかによって、ここのif/elseブロックが異なる動(dòng)作を定義します。クリックしているボタンが「再生」と書(shū)かれている場(chǎng)合、ボタンを「一時(shí)停止」ボタンに変更し、インターバルループを開(kāi)始します。または、ボタンが「一時(shí)停止」ボタンの場(chǎng)合、テキストを「再生」に変更し、ClearInterval（）関數(shù)を使用してループの実行を停止します。

  スライダーには、jQuery UIライブラリに付屬のスライダーを使用したいと思います。これをHTMLに含めて、畫(huà)面にこれを追加するためにいくつかの行を書(shū)きます：

  <span>const svg = d3.select("#chart-area")
  </span>  <span>.append("svg")
  </span>    <span>.attr("width", width)
  </span>    <span>.attr("height", height)
  </span>  <span>.append("g")
  </span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
  </span>

  ここでは、スライドオプションを使用して、イベントリスナーをスライダーに添付しています。スライダーが別の値に移動(dòng)するたびに、この新しい値にタイマーを更新し、その年にデータをデータで実行しています。

  アップデート（）関數(shù)の最後にこの行を追加できるように、スライダーがループが実行されているときに適切な年に移動(dòng)することができます。

  また、updatehtml（）関數(shù)（視覚化が変更されるたびに実行される）にラインを追加します。これは、データの今年に基づいてラベルの値を調(diào)整できます。
  CSSにさらにいくつかの行を投げ入れて、すべてを少しきちんと見(jiàn)せるようにします：

  <span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
  </span>

  そして、私たちはそれを持っています - 私たちの最終製品 - 完全に機(jī)能するインタラクティブなデータの視覚化、すべてが期待どおりに機(jī)能します。

  <span>const pie = d3.pie()
  </span>  <span>.value(d => d.count)
  </span>  <span>.sort(null);
  </span>

  <span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
  </span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
  </span><span><span><span></svg</span>></span>
  </span>

  うまくいけば、このチュートリアルがD3の本當(dāng)の力を?qū)g証し、想像できるものを絶対に作成できるようにします。

  D3をゼロから始めることは常に難しいプロセスですが、報(bào)酬には価値があります。獨(dú)自のカスタム視覚化を作成する方法を?qū)Wびたい場(chǎng)合は、役立つ可能性のあるオンラインリソースをいくつか紹介します。

  SitePointのD3.jsコンテンツの概要
  • D3のホームページの図書(shū)館の紹介。これは、最も基本的なコマンドのいくつかを?qū)g行し、D3で最初のいくつかのステップを作成する方法を示しています。
  D3の作成者であるMike Bostockによる「バーチャートを作成しましょう」 - ライブラリで最も単純なグラフの1つを作成する方法を初心者に示しています。 Elijah Meeks（$ 35）による行動(dòng)中の D3のSlackチャンネルは、D3の新人を非常に歓迎しています。また、優(yōu)れたリソースのコレクションを備えた「學(xué)習(xí)材料」セクションもあります。
このオンラインUdemyコース（20ドル）は、一連のビデオ講義で図書(shū)館のすべてをカバーしています。これはJavaScript開(kāi)発者を?qū)澫螭趣筏皮辍?つのクールなプロジェクトが含まれています。
• bl.ocks.orgおよびblockbuilder.orgで利用可能な視覚化の例の多數(shù)。
D3 APIリファレンスは、D3が提供するすべてのものについて徹底的な技術(shù)的説明を提供します。
そして忘れないでください、私が記事で使用していたコードの完成バージョンを見(jiàn)たい場(chǎng)合は、githubリポジトリで見(jiàn)つけることができます。 JavaScriptおよびD3
• を使用したインタラクティブデータの視覚化に関するよくある質(zhì)問(wèn)（FAQ） インタラクティブデータの視覚化におけるD3の重要性は何ですか？
• D3は、データ駆動(dòng)型のドキュメントを表し、インタラクティブなデータの視覚化の作成に広く使用されているJavaScriptライブラリです。任意のデータをドキュメントオブジェクトモデル（DOM）にバインドし、ドキュメントにデータ駆動(dòng)型の変換を適用できます。 D3は、考えられるすべての機(jī)能を提供しようとするモノリシックなフレームワークではありません。代わりに、問(wèn)題の核心：データに基づいたドキュメントの効率的な操作を解決します。これは獨(dú)自の表現(xiàn)を回避し、並外れた柔軟性を提供し、HTML、SVG、CSSなどのWeb標(biāo)準(zhǔn)の完全な機(jī)能を公開(kāi)します。他のライブラリでは不可能なデータの視覚化を作成する柔軟性を提供するため、ユニークです。これにより、DOMを直接操作できます。つまり、視覚化の最終的な外観を完全に制御できます。 D3は宣言的アプローチも使用します。つまり、最終結(jié)果がどのように見(jiàn)えるかを定義し、D3はそこに到達(dá)する方法を示しています。はい、D3は大規(guī)模で複雑なデータセットを処理できます。あらゆる形式でデータを操作できる強(qiáng)力なデータ操作機(jī)能を備えています。 D3には、さまざまなソースからデータをロードするための組み込み機(jī)能もあり、既存のデータインフラストラクチャと統(tǒng)合しやすくなります。

  D3 Visualizationsをインタラクティブにするにはどうすればよいですか？

  D3は、視覚化にインタラクティブ性を追加するためのいくつかの方法を提供します。イベントリスナーを使用して、クリックやマウスの動(dòng)きなどのユーザーアクションに応答することができ、トランジションを使用してデータの変更をアニメーション化できます。 D3はズームとパンニングもサポートします。これは、大きなデータセットの調(diào)査に役立ちます?？茖W(xué)からビジネスへ。いくつかの一般的なユースケースには、インタラクティブマップの作成、動(dòng)的チャートとグラフの構(gòu)築、複雑なネットワークの視覚化、カスタムデータ駆動(dòng)型のアニメーションの作成が含まれます。 、D3を効果的に使用するには、JavaScriptの基本的な理解が必要です。 D3はJavaScriptライブラリなので、視覚化を作成するにはJavaScriptコードを記述する必要があります。ただし、D3のAPIは直感的で學(xué)習(xí)しやすいように設(shè)計(jì)されているため、JavaScriptの専門(mén)家でなくても、D3で強(qiáng)力な視覚化を作成できます。 ？

  はい、D3は他のJavaScriptライブラリまたはフレームワークと一緒に使用できます。たとえば、D3を使用して、ReactやAngularなどのフレームワークで構(gòu)築されたより大きなアプリケーションの視覚化コンポーネントを作成できます。リアルタイムのデータ視覚化に適しています。柔軟なデータ更新メカニズムがあり、新しいデータが入っているときに視覚化を簡(jiǎn)単に更新できます。これにより、D3はダッシュボードやライブデータフィードなどのアプリケーションに最適です。 >

  D3の學(xué)習(xí)に利用できるリソースはたくさんあります。公式のD3ウェブサイトには豊富なドキュメントと例があり、D3を詳細(xì)にカバーする多くのオンラインチュートリアルとコースがあります。練習(xí)も重要です - D3を使用すればするほど、その概念とAPIでより快適になります。いくつかの制限があります。 JavaScriptとWeb標(biāo)準(zhǔn)を十分に理解する必要があります。これは、初心者にとっての障壁になる可能性があります。また、D3は開(kāi)発者に多くの決定を任せます。これは、どこから始めればよいかわからない場(chǎng)合は圧倒的です。最後に、D3は大規(guī)模なデータセットを処理できますが、パフォーマンスは非常に大きいまたは複雑な視覚化で問(wèn)題になる可能性があります。

以上が最新のJavaScriptおよびD3を使用したインタラクティブなデータ視覚化の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。