0
238
ViewsD3 dibujar círculos alrededor del arco
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");Aquí en lugar de texto, deberían venir círculos continuos, ¿cómo podemos lograr esto?
·
Juan Pablo Isaza
1 answers
Answer question0
Aquí hay un ejemplo simple de Cubic Bezier (4 puntos):
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>
·
Juan Pablo Isaza
Report
Answer question