83 lines
1.9 KiB
HTML
83 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Spider Graph</title>
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<style>
|
|
svg {
|
|
border: 1px solid #ccc;
|
|
}
|
|
.axis {
|
|
stroke: #ccc;
|
|
stroke-width: 1px;
|
|
}
|
|
.area {
|
|
fill: steelblue;
|
|
fill-opacity: 0.3;
|
|
stroke: steelblue;
|
|
stroke-width: 2px;
|
|
}
|
|
.debug {
|
|
fill: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg id="spider" width="300" height="300"></svg>
|
|
|
|
<script>
|
|
const svg = d3.select("#spider");
|
|
const width = +svg.attr("width");
|
|
const height = +svg.attr("height");
|
|
|
|
const center = { x: width / 2, y: height / 2 };
|
|
const radius = 100;
|
|
|
|
// Define 3 axes at 0, 120, 240 degrees in radians
|
|
const axes = [
|
|
{ angle: 0 },
|
|
{ angle: 2 * Math.PI / 3 },
|
|
{ angle: 4 * Math.PI / 3 }
|
|
];
|
|
|
|
// Example values for each axis (normalized from 0 to 1)
|
|
const values = [0.8, 0.6, 0.9];
|
|
|
|
// Draw axis lines
|
|
svg.selectAll(".axis")
|
|
.data(axes)
|
|
.join("line")
|
|
.attr("class", "axis")
|
|
.attr("x1", center.x)
|
|
.attr("y1", center.y)
|
|
.attr("x2", d => center.x + radius * Math.cos(d.angle))
|
|
.attr("y2", d => center.y + radius * Math.sin(d.angle));
|
|
|
|
// Convert values to coordinates
|
|
const valuePoints = axes.map((d, i) => {
|
|
const r = radius * values[i];
|
|
return [
|
|
center.x + r * Math.cos(d.angle),
|
|
center.y + r * Math.sin(d.angle)
|
|
];
|
|
});
|
|
|
|
// Draw filled polygon (data area)
|
|
svg.append("polygon")
|
|
.attr("class", "area")
|
|
.attr("points", valuePoints.map(p => p.join(",")).join(" "));
|
|
|
|
// OPTIONAL: Debug points at each value vertex
|
|
svg.selectAll(".debug")
|
|
.data(valuePoints)
|
|
.join("circle")
|
|
.attr("class", "debug")
|
|
.attr("cx", d => d[0])
|
|
.attr("cy", d => d[1])
|
|
.attr("r", 3);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|