rund3

forks

双方とも複数個指定可能

実装すること

✅preact hooksを入れる

examples

d3-axisを使った例

code:ex-dom.js

document.body.insertAdjacentHTML("beforeend",`

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

</svg>

`);

const { axisBottom, select, scaleLinear } = d3;

const padding = 20;

const axis = axisBottom(scale);

axis(select("svg g"));

code:ex-htm.js

const { render, html } = htmPreact;

const { axisBottom, select, scaleLinear } = d3;

render(html`

const padding = 20;

const axis = axisBottom(scale);

axis(select(g));

}}/>

</svg>

`, document.body);

code:bar.js

const { render, html } = htmPreact;

render(html`<style>

div.bar {

display: inline-block;

width: 40px;

background-color: teal;

}

</style>

${dataset.map(

)}`, document.body);