wslでelixir その171

概要

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

練習問題

Livebookの、kino.jsで、D3.jsでSVGを動作させよ。

写真

defmodule KinoSVG.D3js do
	use Kino.JS
	def new(html) do
		Kino.JS.new(__MODULE__, html)
	end
	asset "main.js" do
		"""
		import "https://d3js.org/d3.v5.js"
		export function init(ctx, html) {
			ctx.root.innerHTML = '<svg id="svg1" style="margin: 0 auto; display: block;"></svg>';
			let svg = d3.select('#svg1')
				.attr('width', 400)
				.attr('height', 400)
				.style('background-color', 'black');
			svg.append('line')
				.style("stroke", "lightgreen")
				.style("stroke-width", 10)
				.attr("x1", 0)
				.attr("y1", 0)
				.attr("x2", 200)
				.attr("y2", 200); 
      svg.append('line')
				.style("stroke", "red")
				.style("stroke-width", 10)
				.attr("x1", 200)
				.attr("y1", 400)
				.attr("x2", 200)
				.attr("y2", 200); 
		}
		"""
	end
end

KinoSVG.D3js.new(0)

以上。