D3.js は P 要素の作成から始まります (ロード可能なデータを表示)

ホームページ

ウェブフロントエンド

jsチュートリアル

D3.js は P 要素の作成から始まります (ロード可能なデータを表示)_JavaScript のヒント

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:32 PM

D3 はデータ操作に基づいたビジュアル JS ライブラリです。d3 を理解するには、ロード可能なデータの最も基本的な表示から始めましょう。

HTML の基本フレームワークについては詳しく説明しません。コードから始めて説明します。

新しいテストディレクトリを作成し、このディレクトリ内に 2 つのフォルダー (demo と d3) を作成します。デモには書き込まれる HTML ファイルが保存され、d3 には d3.v3.js

が保存されます。

デモフォルダーに新しいindexP.html を作成し、次のコードをその中にコピーし、ダブルクリックしてブラウザーで開き、効果を確認します。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>D3: Setting paragraphs' style conditionally, based on data</title> 
<script type="text/javascript" src="../d3/d3.v3.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 

var dataset = [ 5, 10, 15, 20, 25 ]; 

d3.select("body").selectAll("p") 
.data(dataset) 
.enter() 
.append("p") 
.text(function(d) { 
return "I can count up to " + d; 
}) 
.style("color", function(d) { 
if (d > 15) { //Threshold of 15 
return "red"; 
} else { 
return "black"; 
} 
}); 

</script> 
</body> 
</html>

ログイン後にコピー

この簡単なデモで実装される機能は、ボディにpタグを追加し、pタグにd3で読み込んだテキスト内容を追加し、機能設定条件に従って文字色を調整するというものです。

上記のWebページコードと本文中のJSコードは、ページ上に表示されるデータ操作です。今後の多くの例では、この部分のみを変更する必要があり、他の部分はページフレームと見なすことができます。

ここでの内容は、前の記事で一般的に説明されています。d3 連結を使用して、同じオブジェクトに対する段階的なデータ操作を接続し、メンテナンスを容易にします。

d3.select("body") は body 要素を選択し、次のメソッドに接続します

.selectAll("p") はすべての段落を選択します

.data(dataset) は配列データを解析してロードします。配列の長さは 5 です。後続の各メソッドは、配列の添字

に従って配列要素に対して順番に実行されます。

.enter() は、新しいデータバインドされたプレースホルダー要素を作成します (一時的に不明なタグを 5 つ作成するのと同等)。

作成されるタグの数は、選択された既存のタグの数とロードされたデータ配列の長さによって決まります。

この例のように、本文内の p タグが 5 つ未満の場合は、それらを作成します (現在本文内の p タグは 0 なので、5 つ作成されます)。

複数ある場合は作成されません。最終プレースホルダー要素と p 要素の合計数は 5 でなければなりません。

.append("p") はプレースホルダー要素を p 要素に変更します

.text(function(d) {}) 各段落の表示内容を制御する匿名関数を記述します。通常は文字列を返します。このメソッドでは何でも書き込むことができます。

この例では、各段落の対応する配列要素の値を加算した値をカウントできると出力できます

関数の形式は固定されており、この方法でのみ function(d) でデータを関数にロードできます。

.style("color","") は CSS のテキストの色属性を設定します。テキストと同様に、設定された文字列を使用して関数を使用して必要な操作を実行できます。この例では、段落に対応する受信値が 15 より大きい場合、行が赤に変わります

最終的に、以下に示すような効果が得られます。

今回は、SVG で円を描く方法と、円を結ぶ簡単な力図を紹介します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7651

CakePHP チュートリアル

1392

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTミニクロスワードの回答

110

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。