BlazorとD3jsで散布図

d3jsでscatter plot.

準備

.NET Core 3.0 Preview SDK を使っています。こんな感じでコマンド打ちます。

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview5-19227-01
dotnet new blazor -o d3_scatter_plot
cd d3_scatter_plot

実装

3つのファイルを変更します。

wwwroot/index.html

scriptを読み込んでるだけです。d3と blazorから呼び出す用のヘルパー。

wwwroot/helper.js

BlazorとD3を繋ぐためのヘルパーです。

Pages/Index.razor

ランダムなレコードを作って、集計して散布図が出るようにヘルパーの「myD3Helper」を呼び出し。

動作確認

こんな感じなります。