d3.jsのグラフにおいてX、Y両軸のすべての項目にガイドを書きたい。

実現したいこと

X軸がd3.scaleTime()、Y軸がd3.scaleBand()のグラフを作成しました。

↓現状の画像です。

X軸の全ての人名とY軸の全ての時間にそれぞれ縦横ガイドを入れたいです。
↓実現したいイメージ

発生している問題・分からないこと

恐らく<g>要素でSVGのlineを書くのだろうと思うのですが実現方法がわかりません。
ご指示頂けないでしょうか?

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8" />
5    <title>D3 test</title>
6	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
7	<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
8	<style>
9.container {
10	margin: 25px;
11	padding : 0;
12}
13
14#graph {
15	background-color: #e6e6fa;
16	margin: 0 auto;
17}
18
19.x-axis text {
20  font-family: sans-serif;
21  font-size: 12px;
22}
23
24
25.y-axis text {
26  font-family: sans-serif;
27  font-size: 12px;
28}
29	</style>
30	</head>
31	<body>
32    	<div class="container" id="container">
33			<div id="svg-container"></div>
34		<div>
35		<script src="./sample.js"></script>
36	</body>
37</html>

javascript
1var data =[
2// 実在しない仮データです。
3 { 'name': '岩谷 一朗 様',   'when': ('2025-08-12 10:14:00') },
4 { 'name': '岩谷 一朗 様',   'when': ('2025-08-12 15:23:00') },
5 { 'name': '大林 桃佳 様',   'when': ('2025-08-12 17:44:00') },
6 { 'name': '小高 克己 様',   'when': null                    },
7 { 'name': '片桐 実夏子 様', 'when': null                    },
8 { 'name': '片野 貴子 様',   'when': null                    },
9 { 'name': '川田 優花 様',   'when': null                    },
10 { 'name': '川原 千代乃 様', 'when': null                    },
11 { 'name': '菊田 利幸 様',   'when': null                    },
12 { 'name': '北 丈人 様',     'when': null                    },
13 { 'name': '城戸 利忠 様',   'when': null                    },
14 { 'name': '小林 一仁 様',   'when': null                    },
15 { 'name': '坂下 一博 様',   'when': null                    },
16 { 'name': '東海林 優里 様', 'when': null                    },
17 { 'name': '曽我 紀之 様',   'when': null                    },
18 { 'name': '田淵 一羽 様',   'when': null                    },
19 { 'name': '長沼 憲一 様',   'when': '2025-08-12 10:33:00'   },
20 { 'name': '西原 欽也 様',   'when': null                    },
21 { 'name': '藤井 千絵 様',   'when': null                    },
22 { 'name': '牧 金次 様',     'when': null                    },
23 { 'name': '三村 勝大 様',   'when': null                    },
24 { 'name': '矢島 博嗣 様',   'when': null                    }
25];
26
27const graph_padding ={ top : 50, right : 50, left : 100, bottom : 50 };
28const graph_height  =600;
29var   graph_width   =null;
30
31function graph_draw() {
32	// 親divの幅を取得
33	graph_width = parseInt( d3.select("#svg-container").style('width') );
34
35	d3.select('#svg-container').selectAll('*').remove();
36
37	// svg作成
38	var svg =d3.select("#svg-container")
39	.append("svg")
40	.attr( "id", "graph" )
41	.attr("width", graph_width )
42	.attr("height", graph_height);
43
44	// xAxis作成
45	xScale =d3.scaleTime()
46    .domain([ new Date('2025-08-12 08:00:00'), new Date('2025-08-12 19:00:00') ])
47    .range([0, graph_width - ( graph_padding.left + graph_padding.right ) ]);
48
49	svg.append("g")
50	.attr("transform", `translate(${graph_padding.left}, ${graph_padding.top})`)
51	.attr( "class", "x-axis" )
52	.call(
53		d3.axisTop(xScale)
54		.tickFormat(d3.timeFormat("%H:%M"))
55		.tickSize(5)
56	);
57
58	// yAxis作成
59	yScale =d3.scaleBand()
60		.domain(data.map(d => d.name))
61		.range([0, graph_height - ( graph_padding.top + graph_padding.bottom )])
62    	.padding(1)
63	    .round(true)
64
65	svg.append("g")
66	.attr("transform", `translate(${graph_padding.left}, ${graph_padding.top})`)
67	.attr( "class", "y-axis" )
68	.call(
69		d3.axisLeft(yScale)
70	);
71
72	// circle
73	svg.append("g")
74	.selectAll("circle")
75	.data(data)
76	.enter()
77	.append("circle")
78	.attr("transform", `translate(${graph_padding.left}, ${graph_padding.top})`)
79	.attr("cx", function(d) { return xScale(new Date(d.when)); })
80	.attr("cy", function(d) { return yScale(d.name);  })
81    .attr("fill", "steelblue")
82    .attr("r", 10);
83}
84
85window.onload = function () {
86	graph_draw();
87}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

d3公式サンプルにて同様のグラフ
ソースを見たのですがよくわかりません。

補足

d3のバージョンはd3@7.9.0です。

行動規範の内容に同意します

回答1件

自己解決

以下でいけました。

gideData =structuredClone(xScale.ticks());
gideBegin =gideData.shift();
gideEnd   =gideData.pop();
svg.append("g")
.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("fill", "none")
.attr("stroke", "#cccccc")
.attr("stroke-width", 1)
.attr("x1", function (d) {
    return xScale(new Date(gideBegin));
})
.attr("y1", function (d) {
    return yScale(d.name);
})
.attr("x2", function (d) {
    return xScale(new Date(gideEnd));
})
.attr("y2", function (d) {
    return yScale(d.name);
})
.attr("transform", `translate(${graph_padding.left}, ${graph_padding.top})`)

svg.append("g")
.selectAll("line")
.data(xScale.ticks())
.enter()
.append("line")
.attr("fill", "none")
.attr("stroke", "#cccccc")
.attr("stroke-width", 1)
.attr("x1", function (d) {
    return xScale(new Date(d));
})
.attr("y1", 0 )
.attr("x2", function (d) {
    return xScale(new Date(d));
})
.attr("y2", graph_height - ( graph_padding.top + graph_padding.bottom ) )
.attr("transform", `translate(${graph_padding.left}, ${graph_padding.top})`)

投稿2025/08/18 02:52

increment-P

総合スコア17