wslでelixir その87

概要

wsl(wsl2じゃない)で、elixirやってみた。
練習問題、やってみた。

練習問題

Livebookでd3.jsでtable作れ。

写真

サンプルコード

defmodule KinoD3.Table do
	use Kino.JS
	def new(html) do
		Kino.JS.new(__MODULE__, html)
	end
	asset "main.js" do
		"""
		import "https://d3js.org/d3.v5.min.js";
		export function init(ctx, json) {
  		const chartid = document.createElement("div");
	  	chartid.id = "out";
		  ctx.root.appendChild(chartid);
		  var blob = new Blob([json], {
			  type: "application/json"
		  });
		  var url = URL.createObjectURL(blob);
		  d3.json(url).then(function(data) {
			  d3.select('#out').append('div').selectAll().data(data).enter().append('div').text(function(dataRow) {
				  return dataRow['kanji'] + ' ' + dataRow['kana'] + ' ' + dataRow['color'];
			  });
		  }).catch(function(error) {
			  alert("ng")
		  });
    }
		"""
	end

end

KinoD3.Table.new("""
[{
	"kanji": "青",
	"kana": "あお",
	"color": "blue"
}, {
	"kanji": "赤",
	"kana": "あか",
	"color": "red"
}, {
	"kanji": "緑",
	"kana": "みどり",
	"color": "green"
}]
""")

以上。