Как нарисовать кривые Безье (smooth lines) с библиотекой d3.js

Question

Вот в чем вопрос. Нужно нарисовать кривые Безье, а как не понятно.

Answer 1

Quadratic Bezier (3 точки):

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

Cubic Bezier (4 точки):

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

Answer 2

Убрать заливку:

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

Answer 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>

БЛОГ НА HUSL

Как нарисовать кривые Безье (smooth lines) с библиотекой d3.js

Ответы (3 шт):