{
const width = 1000;
const height = 500;
const margin = { top: 30, right: 30, bottom: 30, left: 30 };
const xScale = d3
.scaleBand()
.domain(d3.range(24))
.range([margin.left, width - margin.right]);
const svg = d3.create("svg").attr("width", width).attr("height", height);
const hourG = svg
.append("g")
.selectAll("g")
.data(dataOfHours3)
.join("g")
.attr("class", "hour")
.attr("transform", (d) => `translate(${xScale(d[0])}, ${height / 2})`);
hourG
.append("g")
.attr("class", "on")
.selectAll("rect")
.data((d) => d[1].get("ON") || [])
.join("rect")
.attr("y", (d, i) => i * -20)
.attr("x", (d, i) => {
if (d.shape === "縦長") {
return -10;
} else {
return 0;
}
})
.attr("height", 20)
.attr("width", (d, i) => {
if (d.shape === "縦長") {
return 40;
} else {
return 20;
}
})
.attr("rx", (d, i) => {
if (d.shape === "丸" || d.shape === "まる") {
return 10;
} else {
return 3;
}
})
.attr("ry", (d, i) => {
if (d.shape === "丸" || d.shape === "まる") {
return 10;
} else {
return 3;
}
})
.attr("fill", (d, i) => {
if (d.hardness === "柔らかい") {
return "#3FC6D1";
} else if (d.hardness === "軽い") {
return "#A3E220";
} else if (d.hardness === "普通") {
return "#FFD155";
} else {
return "#FF8457";
}
})
.attr("stroke", "#433C46")
.attr("stroke-width", 2);
hourG
.append("g")
.attr("class", "off")
.selectAll("rect")
.data((d) => d[1].get("OFF") || [])
.join("rect")
.attr("y", (d, i) => 40 + i * 20)
.attr("x", (d, i) => {
if (d.shape === "縦長") {
return -10;
} else {
return 0;
}
})
.attr("height", 20)
.attr("width", (d, i) => {
if (d.shape === "縦長") {
return 40;
} else {
return 20;
}
})
.attr("rx", (d, i) => {
if (d.shape === "丸" || d.shape === "まる") {
return 10;
} else {
return 3;
}
})
.attr("ry", (d, i) => {
if (d.shape === "丸" || d.shape === "まる") {
return 10;
} else {
return 3;
}
})
.attr("fill", (d, i) => {
if (d.hardness === "柔らかい") {
return "#3FC6D1";
} else if (d.hardness === "軽い") {
return "#A3E220";
} else if (d.hardness === "普通") {
return "#FFD155";
} else {
return "#FF8457";
}
})
.attr("stroke", "#433C46")
.attr("stroke-width", 2);
return svg.node();
}