d3js拖拽添加 三角形 矩形 圆弧 椭圆等曲线
时间: 2024-12-07 17:12:18
(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)
使用 D3.js 可以轻松实现拖拽来添加形状，比如三角形、矩形、圆弧和椭圆。下面的示例展示了如何添加这些图形，并通过拖拽来移动它们。
示例代码
以下代码实现了一个简单的 SVG 画布，用户可以通过点击按钮添加不同的形状，并且能够通过拖拽来移动这些形状。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v7.min.js"></script>
<title>D3.js 拖拽添加形状示例</title>
<style>
svg {
border: 1px solid #ccc;
cursor: pointer;
}
.shape {
cursor: grab;
transition: transform 0.2s;
}
.shape:active {
cursor: grabbing;
}
</style>
</head>
<body>
<button id="addTriangle">添加三角形</button>
<button id="addRectangle">添加矩形</button>
<button id="addArc">添加圆弧</button>
<button id="addEllipse">添加椭圆</button>
<svg width="800" height="600"></svg>
<script>
const svg = d3.select("svg");
// 添加三角形
d3.select("#addTriangle").on("click", function() {
const points = "100,0 200,200 0,200"; // 三角形的点
const triangle = svg.append("polygon")
.attr("points", points)
.attr("transform", "translate(50,50)") // 初始位置偏移
.attr("fill", "orange")
.attr("class", "shape")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged));
function dragstarted(event) {
d3.select(this).raise().classed("active", true);
}
function dragged(event) {
d3.select(this)
.attr("transform", function() {
const currentTransform = d3.select(this).attr("transform") || "translate(0,0)";
const translate = d3.zoomTransform(svg.node()).apply([0, 0]);
const translateX = translate[0] + event.dx;
const translateY = translate[1] + event.dy;
return translate(${translateX},${translateY});
});
}
});
// 添加矩形
d3.select("#addRectangle").on("click", function() {
const rect = svg.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 100)
.attr("height", 50)
.attr("fill", "blue")
.attr("class", "shape")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged));
function dragstarted(event) {
d3.select(this).raise().classed("active", true);
}
function dragged(event) {
d3.select(this)
.attr("x", (d, i, nodes) => d3.select(nodes[i]).attr("x") + event.dx)
.attr("y", (d, i, nodes) => d3.select(nodes[i]).attr("y") + event.dy);
}
});
// 添加圆弧
d3.select("#addArc").on("click", function() {
const arcGenerator = d3.arc()
.innerRadius(0) // 内半径
.outerRadius(50) // 外半径
.startAngle(0) // 开始角度（弧度）
.endAngle(Math.PI / 2); // 结束角度（弧度）
const arc = svg.append("path")
.attr("d", arcGenerator)
.attr("transform", "translate(150,150)") // 初始位置偏移
.attr("fill", "green")
.attr("class", "shape")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged));
function dragstarted(event) {
d3.select(this).raise().classed("active", true);
}
function dragged(event) {
const transform = d3.select(this).attr("transform").replace(/translate$([^,]+),([^,]+)$/, (match, x, y) => {
return translate(${+x + event.dx},${+y + event.dy});
});
d3.select(this).attr("transform", transform);
}
});
// 添加椭圆
d3.select("#addEllipse").on("click", function() {
const ellipse = svg.append("ellipse")
.attr("cx", 100)
.attr("cy", 100)
.attr("rx", 50)
.attr("ry", 25)
.attr("fill", "purple")
.attr("class", "shape")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged));
function dragstarted(event) {
d3.select(this).raise().classed("active", true);
}
function dragged(event) {
d3.select(this)
.attr("cx", (d, i, nodes) => d3.select(nodes[i]).attr("cx") + event.dx)
.attr("cy", (d, i, nodes) => d3.select(nodes[i]).attr("cy") + event.dy);
}
});
</script>
</body>
</html>代码解释
SVG画布:
创建一个
SVG元素，用户可以在这里添加形状。添加形状按钮:
四个按钮分别用于添加三角形、矩形、圆弧和椭圆。
三角形:
使用
polygon元素表示三角形，通过按钮点击添加三角形，使用drag处理器来实现拖拽移动。矩形:
使用
rect元素表示矩形，也通过按键来添加和拖放。圆弧:
使用 D3 的
arc生成器来创建一个圆弧，同时支持拖拽移动。椭圆:
使用
ellipse元素添加椭圆形状，支持拖拽移动。拖拽实现:
对每个形状调用 D3 的
drag，在dragged方法中，根据鼠标的移动量 (event.dx和event.dy) 更新形状的位置。
使用说明
点击按钮添加不同的形状（三角形、矩形、圆弧和椭圆）。
拖动绘制的形状，可以在SVG画布中自由移动它们。
您可以将此代码粘贴到 HTML 文件中并在浏览器中打开，以查看功能效果。如果您希望添加更多的功能或有其他需求，请随时告诉我！
