d3-axis - くたくたじゅうよん

d3-axis

軸を描画するD3.jsのmodule

https://github.com/d3/d3-axis

コード

SVGで横軸を組み立てているだけ

JSXで書き換えられそうtakker.icon

d3-axisをJSXで書き直す

API reference

概略

axisTop(), axisLeft(), axisRight(), axisBottom()で軸Axisを作る

引数にScale (d3)を渡す

scaleをAxis.scale()であとから変更できる

Axis(selection)と関数で呼び出すと、selectionで指定されたDOMに対して軸を描画する

1. 横軸を作る

https://gyazo.com/8edf1a2a3d1e4a0e92cc86f412041021 https://takker99.github.io/rund3?js=https://scrapbox.io/api/code/takker/d3-axis/ex1.js

code:ex1.js

const { render, html } = htmPreact;

const { axisBottom, select, scaleLinear } = d3;

const width, height = 600, 100;

render(html`

描画領域の設定

code:ex1.js

svg gに描画する

縦方向に中央揃えしておく

code:ex1.js

<g transform=${translate(0, ${height / 2})} ref=${(g) => {

d3-scaleで軸の範囲と長さを設定する

code:ex1.js

const padding = 20;

const scale = d3.scaleLinear().domain(0, 100).range(padding, width - padding);

ここでは、値の範囲が0から100まで、描画範囲が20pxから580pxまでに設定された

svgの両端から20px離して描画するようにした

この位置設定もCSSかSVGのtransformで完結させられないかな？takker.icon

axisBottomで横軸を描画する関数Axishttps://doc.deno.land/https://cdn.skypack.dev/-/d3-axis@v3.0.0-atdNID4TA9Y0wR53lsTq/dist=es2019,mode=types/index.d.ts/~/Axis を作り、select(g)(=select("svg g"))にrenderする

code:ex1.js

const axis = axisBottom(scale);

axis(select(g));

axis(select(g))は通常select(g).call(axis)と書く

短くaxisBottom(scale)(select(g))とも書ける

code:ex1.js

}}/>

</svg>`, document.body);

「1. 横軸を作る」の位置設定をSVG transformだけでしてみる

run

2023-02-07 11:40:37 無理だった

SVG transformは50%のような指定ができない

自分のコンテナに合わせた座標変換が不可能

code:ex1-1.js

const width, height = 600, 100;

document.body.insertAdjacentHTML("beforeend",`

</g>

</svg>

`);

const { axisBottom, select, scaleLinear } = d3;

const scale = d3.scaleLinear().domain(0, 100).range(0, 100);

const axis = axisBottom(scale);

axis(select("svg g g"));

目盛りの間隔を調整する

Axis.ticks()https://doc.deno.land/https://cdn.skypack.dev/-/d3-axis@v3.0.0-atdNID4TA9Y0wR53lsTq/dist=es2019,mode=types/index.d.ts/~/Axis#ticksで、軸に含まれる目盛りの数を指定する

Axis.tickArguments()と同じ効果

内部ではScale.ticks()https://doc.deno.land/https://cdn.skypack.dev/-/d3-scale@v4.0.2-qUv67mnQQKwRMEsPRKcO/dist=es2019,mode=types/index.d.ts/~/ScaleContinuousNumeric#ticks に渡され、Scale(d3-scale)が変更される

ticks()が無いときは無視される

それからScale.tickFormat()https://doc.deno.land/https://cdn.skypack.dev/-/d3-scale@v4.0.2-qUv67mnQQKwRMEsPRKcO/dist=es2019,mode=types/index.d.ts/~/ScaleContinuousNumeric#tickFormatにも渡される

tickFormat()が無いときは(x) => xが使われる

Scaleのこれらの値は、Axisを実行する際にresetされてしまうので、Axis.ticks()で設定する必要がある

例：20ごとに目盛りを打つ

https://gyazo.com/99fa76f50b2e913f63337ff4815d36d2 https://suto3.github.io/rund3?code=https://scrapbox.io/api/code/takker/d3-axis/ex-ticks.js

code:ex-ticks.js

const width, height = 600, 100;

document.body.insertAdjacentHTML("beforeend",`

</svg>

`);

const { axisBottom, select, scaleLinear } = d3;

const padding = width / 30;

const scale = scaleLinear().domain(0, 100).range(padding, width - padding);

const axis = axisBottom(scale)

.ticks(100 / 20);

axis(select("svg g"));

references

https://observablehq.com/@d3/styled-axes

D3 Axes

D3 軸と軸ラベルの微調整テク - Qiita

【D3.js】チャートの軸と目盛りをカスタマイズする５の方法 – GUNMA GIS GEEK

API reference

code:axis.ts

export * from "https://cdn.skypack.dev/d3-axis@v3.0.0?dts";

#2023-04-08 20:50:14

#2023-02-07 14:31:33

#2023-02-05 11:04:24