主页 / 问题 / 1085586
Accepted
Arthur Alunts
Asked:2020-02-21 16:33:52 +0000 UTC2020-02-21 16:33:52 +0000 UTC

如何使用 d3.js 库绘制贝塞尔曲线（平滑线）

  • 772

就是那个问题。必须绘制贝塞尔曲线，但不清楚如何绘制。

javascript

3 个回答

  1. Best Answer

    二次贝塞尔曲线（3 分）：

    d3.select('svg').append('path').attr('d', 'M 100,100 Q 200,100 200,200')

    三次贝塞尔曲线（4 分）：

    d3.select('svg').append('path').attr('d', 'M 100,100 C 200,100 200,200 300,200')
    • 2

  2. 删除填充：

    d3.select('path').attr('fill', 'none');
    • 2 

  3. <!DOCTYPE html>
<meta charset="utf-8">
<title>My Project 1.0.0.1</title>
<html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<script>
let x1=102
let y1 =100
//Quadratic Bezier (3 точки):
var canvas = d3.select("body")
   .append("svg")
   .attr("height", 1024)
   .attr("width", 1366);
//Cubic Bezier (4 точки):
let curve1 = canvas.append("svg").append('path').attr('d', `M ${x1}, ${y1} C 200,100 200,200 300,100`).attr('fill', 'none').attr("stroke", "blue")
let curve2 = canvas.append("svg").append('path').attr('d', `M ${x1}, ${y1} Q 200,100 200,200`).attr('fill', 'none').attr("stroke", "red")
</script>
</body>
</html>

    • 2

相关问题