D3.jsで時間割を作るテスト
D3.jsでtimelineを描くコードを簡略化して、作成を試みる
Drag & drop機能を一旦削る
✅やはりzoomがおかしい
D3 single axis jitterplot pan and zoomのコードと比べて、どこがおかしいのかを確かめたい
04:10:36 直った
次にやること
task line (takker-scheduler-3)からとってきたデータを表示する
特定の領域のみ表示されるようzoomしておく
https://d3-graph-gallery.com/graph/interactivity_zoom.html
k,x,yの値がわかればいい
https://takker99.github.io/rund3?js=https://scrapbox.io/api/code/takker/D3.jsで時間割を作るテスト/app.js
code:app.js
(async () => {
const { addDays, startOfDay, lightFormat, min, max } = await import("https://cdn.jsdelivr.net/npm/date-fns@2.29.3/+esm");
const { h, html, render, useState, useMemo, useCallback, useEffect } = htmPreact;
const { select, scaleBand, scaleTime, axisBottom, axisLeft, drag, zoom, schemeCategory10 } = d3;
const XAxis = ({ scale, height, padding }) => {
const chartHeight = height - padding.top - padding.bottom;
const g, setG = useState(null);
useEffect(() => select(g).call(
axisBottom(scale)
.ticks(10)
.tickFormat((d) => d.getHours() === 0 && d.getMinutes() === 0 && d.getSeconds() === 0
// 日付変更線では年月日も表示する
? lightFormat(d, "yyyy-MM-dd HH:mm")
: lightFormat(d, "HH:mm")
)
.tickSize(-chartHeight)
), g, scale, chartHeight);
return html<g transform=${translate(0, ${height - padding.bottom})} ref=${setG} />;
};
const Bar = ({ event: { from, to, categoryNo }, scale, height }) =>
html`<rect
x=${scale(from)}
y=${0}
width=${(scale(to) ?? 0) - (scale(from) ?? 0)}
fill=${schemeCategory10categoryNo % 10}
height=${height}
/>`;
const padding = { top: 10, right: 10, bottom: 10, left: 75 };
const Timeline = ({ schedule, width, height }) => {
const timeLineDomain = useMemo(
() => [
startOfDay(min(schedule.map((e) => e.from))),
addDays(startOfDay(max(schedule.map((e) => e.from))), 1),
],
schedule,
);
const originalScale = useMemo(
() => scaleTime()
.domain(timeLineDomain)
.range(padding.left, width - padding.right),
timeLineDomain, padding.left, padding.right, width,
);
const scale, setScale = useState(() => originalScale);
useEffect(() => setScale(() => originalScale), originalScale);
const barHeight = height - padding.top - padding.bottom;
const svgEl, setSVG = useState(null);
const zoomer = useMemo(() => zoom()
.scaleExtent(1, 20)
.translateExtent(0, 0], [width, 0)
.on("zoom", (e) => {
setScale(() => e.transform.rescaleX(originalScale));
}), width, originalScale);
useEffect(() => zoomer(select(svgEl)), svgEl, zoomer);
return html`<style>
:host {
position: fixed;
bottom: 0;
left: 0;
border: 1px solid gray;
border-radius: 4px;
}
.tooltip {
position: absolute;
text-align: center;
width: auto;
height: auto;
padding: 5px;
font: 12px;
background: white;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
visibility: hidden;
}
.bar:hover {
fill: brown;
}
rect {
mix-blend-mode: multiply;
}
.dragging {
opacity: 0.7;
}
</style>
<svg width=${width} height=${height} ref=${setSVG}>
<${XAxis} scale=${scale} padding=${padding} height=${height} />
${schedule.map((e) => html<${Bar} event=${e} scale=${scale} height=${barHeight} />)}
</svg>`;
};
/** @type {Event[]} */
const schedule = [
{
categoryNo: 0,
from: new Date(2020, 7, 11),
to: new Date(2020, 7, 11, 7, 0, 0),
},
{
categoryNo: 1,
from: new Date(2020, 7, 11, 7, 30, 0),
to: new Date(2020, 7, 11, 8, 30, 0),
},
{
categoryNo: 3,
from: new Date(2020, 7, 11, 8, 30, 0),
to: new Date(2020, 7, 11, 10, 0, 0),
},
{
categoryNo: 7,
from: new Date(2020, 7, 12),
to: new Date(2020, 7, 12, 7, 0, 0),
},
{
categoryNo: 5,
from: new Date(2020, 7, 12, 7, 30, 0),
to: new Date(2020, 7, 12, 8, 30, 0),
},
{
categoryNo: 2,
from: new Date(2020, 7, 13, 8, 30, 0),
to: new Date(2020, 7, 13, 10, 0, 0),
},
];
render(html<${Timeline} schedule=${schedule} width=${900} height=${200} />, document.body);
})().catch((e) => console.error(e));
#2023-04-05 13:27:49
#2023-04-04 09:52:25