程式碼
// html
<svg class="clickSvg"
style="border: 1px solid rgb(103, 102, 102)"
></svg>
// js
const clickCircle = d3
.select(".clickSvg")
.append("circle")
.attr("r", 20)
.attr("cx", 20)
.attr("cy", 20)
.attr("fill", "rgb(246, 139, 71)")
.attr("cursor", "pointer");
clickCircle.on("click", (e) => {
if (e.target.getAttribute("fill") === "rgb(246, 139, 71)") {
d3.select(e.target)
.transition()
.ease(d3.easeBack)
.duration(1000)
.attr("fill", "blue")
.attr("transform", "translate(250, 0)");
} else {
d3.select(e.target)
.transition()
.ease(d3.easeBack)
.duration(1000)
.attr("fill", "rgb(246, 139, 71)")
.attr("transform", "translate(0, 0)");
}
});
程式碼
// html
<svg class="mouseoverSvg"></svg>
// js
const mouseoverCircle = d3
.select(".mouseoverSvg")
.append("circle")
.attr("r", 50)
.attr("cx", 20)
.attr("cy", 20)
.attr("cursor", "pointer")
.attr("fill", "rgb(246, 139, 71)")
.attr("transform", "translate(130, 50)");
mouseoverCircle
.on("mouseover", (e) => {
d3.select(e.target)
.transition()
.duration(2000)
.attr("fill", "blue");
})
.on("mouseleave", (e) => {
d3.select(e.target)
.transition()
.duration(2000)
.attr("fill", "rgb(246, 139, 71)");
});
程式碼
// html
<svg class="pointerSVG"></svg>
// js
const pointerSvg = d3
.select(".pointerSvg")
.attr("width", 500)
.attr("height", 300)
.attr("cursor", "pointer");
let txt = pointerSvg.append("text");
pointerSvg.on("mousemove", (e) => {
let position = d3.pointer(e, pointerSvg.node());
console.log(position);
txt
.attr("x", position[0]) //取[x]
.attr("y", position[1]) //取[Y]
.text(`X：${parseInt(position[0])} ， Y：${parseInt(position[1])}`);
});
程式碼
// html
<svg class="pointsSvg"></svg>
<button class="my-3 d-block btn btn-primary"
onclick="resetGrid()">
Reset
</button>
// js
const pointsSvg = d3
.select(".pointsSvg")
.attr("width", 500)
.attr("height", 380)
.attr("cursor", "pointer");
// 設定點點數量、大小、顏色
const numPoints = 300;
const pointWidth = 4;
const pointMargin = 20;
const colorScale = d3
.scaleSequential(d3.interpolateViridis)
.domain([numPoints - 1, 0]);
// 建立 array of points，包含各自ID與色彩
const points = d3.range(numPoints).map((index) => ({
id: index,
color: colorScale(index),
}));
// 建立每個點點在畫布的位置
const gridLayout = (points, pointWidth, gridWidth) => {
const pointHeight = pointWidth;
const pointsPerRow = Math.floor(gridWidth / pointWidth);
const numRows = points.length / pointsPerRow;
points.forEach((point, i) => {
point.x = pointWidth * (i % pointsPerRow);
point.y = pointHeight * Math.floor(i / pointsPerRow);
});
return points;
};
// 繪製點點
const draw = () => {
pointsSvg
.selectAll("circle")
.data(points)
.enter()
.append("circle")
.attr("r", 10)
.attr("cx", (d) => d.x + 20)
.attr("cy", (d) => d.y + 20)
.attr("fill", (d) => d.color)
.on("mouseover", (e) => {
const currentX = +e.target.getAttribute("cx");
d3.select(e.target).remove();
});
};
// 重設
const resetGrid = () => {
pointsSvg.selectAll("circle").remove();
draw();
};
gridLayout(points, pointWidth + pointMargin, 500);
draw();