0
245
ViewsD3 draw circles around arc
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");
Here instead of text, continuous circles should be coming, how we can achieve this?
·
Juan Pablo Isaza
1 answers
Answer question0
Here is a simple Cubic Bezier (4 points) example:
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