D3 圍繞圓弧畫圓

Question

const pathSVG = d3
        .select("body")
        .append("svg")
        .attr("width", 791.558)
        .attr("height", 104.254);
    
    pathSVG.append("path")
        .attr("id", "one") //Unique id of the path
        .attr("d", "M-5723-3100.181s26.431,4.927,103.481-16.125c0,0,116.022-38.969,215.919-9.854,0,0,112.888,31.354,150.517,27.323,0,0,60.028.9,143.8-23.292,0,0,85.26-34.489,177.843,21.344v66.9L-5723-3032.707Z") //SVG path
        .style("fill", "#fff4e4")
        .attr("transform", `translate(5723, 3136.961)`);

pathSVG.append("text")
            .attr("x", 6)
            .attr("dy", 20)
            .append("textPath")
            .attr("xlink:href", "#one")
            .style("text-anchor", "start")
            .text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry");

這里應該不是文字，而是連續的圓圈，我們如何才能做到這一點？

Answer 1

這是一個簡單的三次貝塞爾曲線（4 分）示例：

 const points = [{x: 0, y: 100}, {x: 100, y: 0}, {x: 200, y: 200}, {x: 300, y: 100}]; const cbPoint = t => { const x = points[0].x * t * t * t + points[1].x * 3 * t * t * (1 - t) + points[2].x * 3 * t * (1 - t) * (1 - t) + points[3].x * (1 - t) * (1 - t) * (1 - t); const y = points[0].y * t * t * t + points[1].y * 3 * t * t * (1 - t) + points[2].y * 3 * t * (1 - t) * (1 - t) + points[3].y * (1 - t) * (1 - t) * (1 - t); return {x, y}; } const RADIUS = 7; const OFFSET = 25; const WAVES = 2; const svg = d3.select('svg'); const path = `M ${points[0].x},${points[0].y} C ${points[1].x},${points[1].y} ${points[2].x},${points[2].y} ${points[3].x},${points[3].y}`; for (let index = 0; index < WAVES; index++) { const g = svg.append('g'); g.attr('transform', `translate(${50 + index * 300}, 0)`); g.append('path').attr('d', path).style('fill', 'none').style('stroke', 'black'); for (let t = 0; t < 1; t += 0.1) { const {x, y} = cbPoint(t); g.append('circle') .attr('r', RADIUS) .attr('cx', x) .attr('cy', y + OFFSET) } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg width="700" height="200" > </svg>