D3.js Draw Circle between dash - svg

Question

tried trying to draw circle and dash in one path
like this : ..--..--..--..--..--..--..
2 dot and 2 dashes and how can handle it with function
like this :
function Draw_Dash_And_Circle(x1,y1,x2,y2){
draw dash and circle on the single line
}
i type this code and work well
but need logical code for tracing dots location
<!-- Two dash Two Dot -->
var x1,x2,y1,y2,cx1,cy1,cx2,cy2;
x1 = 0;
x2 = 1;
y1 = 90;
y2 = 90;
for (let i = 0; i < 100; i++) {
svg.append('line')
.style("stroke", "black")
.style("stroke-width", 0.5)
.attr("x1", x1)
.attr("y1", y1)
.attr("x2", x2)
.attr("y2", y2);
x1 += 2;
x2 += 2;
svg.append('line')
.style("stroke", "black")
.style("stroke-width", 0.5)
.attr("x1", x1)
.attr("y1", y1)
.attr("x2", x2)
.attr("y2", y2);
cx1 = x2 + 3;
svg.append('circle')
.attr("cx",cx1)
.attr("r",0.5)
.attr("cy",y2);
cx2 = cx1 + 2;
svg.append('circle')
.attr("cx",cx2 )
.attr("r",0.5)
.attr("cy",y2);
x2 = cx2 + 2;
x1 = cx2 + 3;
}
please help me
thanks.

Answer 1

While you could append circles and lines or other elements along a path or line's route, it is probably easier to append two paths/lines and use stroke dash arrays and stroke line caps to style the lines into a collection of circles and/or squares/rectangles:
Eg for lines:
selection.append("line")
.attr("x1", d=>d.x1)
.attr("x2", d=>d.x2)
.attr("y1", d=>d.y1)
.attr("y2", d=>d.y2)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-linecap","round");
selection.append("line")
.attr("x1", d=>d.x1)
.attr("x2", d=>d.x2)
.attr("y1", d=>d.y1)
.attr("y2", d=>d.y2)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-dashoffset", "32" )
.attr("stroke-linecap","square")
Or for paths:
var line = d3.line()
.curve(d3.curveBasis);
selection.append("path")
.attr("d",line)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-linecap","round")
.style("fill","none")
selection.append("path")
.attr("d",line)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-dashoffset", "32" )
.attr("stroke-linecap","square")
.style("fill","none")
Which gives something like:
var svg = d3.select("svg");
var linedata = [
{x1: 100, y1: 50, x2: 300, y2: 50},
{x1: 100, y1: 250, x2: 300, y2: 250}
]
svg.selectAll("g")
.data(linedata)
.join("g")
.call(line);
function line(selection) {
selection.append("line")
.attr("x1", d=>d.x1)
.attr("x2", d=>d.x2)
.attr("y1", d=>d.y1)
.attr("y2", d=>d.y2)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-linecap","round");
selection.append("line")
.attr("x1", d=>d.x1)
.attr("x2", d=>d.x2)
.attr("y1", d=>d.y1)
.attr("y2", d=>d.y2)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-dashoffset", "32" )
.attr("stroke-linecap","square")
}
var pathdata = [
[50,100],
[150,200],
[250,100],
[350,200]
]
svg.append("g")
.datum(pathdata)
.call(path);
function path(selection) {
var line = d3.line()
.curve(d3.curveBasis);
selection.append("path")
.attr("d",line)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-linecap","round")
.style("fill","none")
selection.append("path")
.attr("d",line)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-dashoffset", "32" )
.attr("stroke-linecap","square")
.style("fill","none")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
<svg width= "500" height="300"></svg>
Also easy to animate:
var svg = d3.select("svg");
var linedata = [
{x1: 100, y1: 50, x2: 300, y2: 50},
{x1: 100, y1: 250, x2: 300, y2: 250}
]
svg.selectAll("g")
.data(linedata)
.join("g")
.call(line);
function line(selection) {
selection.append("line")
.attr("x1", d=>d.x1)
.attr("x2", d=>d.x2)
.attr("y1", d=>d.y1)
.attr("y2", d=>d.y2)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-linecap","round")
.transition()
.attr("stroke-dashoffset",1000)
.duration(20000)
selection.append("line")
.attr("x1", d=>d.x1)
.attr("x2", d=>d.x2)
.attr("y1", d=>d.y1)
.attr("y2", d=>d.y2)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-dashoffset", "32" )
.attr("stroke-linecap","square")
.transition()
.attr("stroke-dashoffset",1032)
.duration(20000)
}
var pathdata = [
[50,100],
[150,200],
[250,100],
[350,200]
]
svg.append("g")
.datum(pathdata)
.call(path);
function path(selection) {
var line = d3.line()
.curve(d3.curveBasis);
selection.append("path")
.attr("d",line)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-linecap","round")
.style("fill","none")
.transition()
.attr("stroke-dashoffset",1000)
.duration(20000)
selection.append("path")
.attr("d",line)
.attr("stroke","black")
.attr("stroke-width", 12)
.attr("stroke-dasharray", "0 16 0 48")
.attr("stroke-dashoffset", "32" )
.attr("stroke-linecap","square")
.style("fill","none")
.transition()
.attr("stroke-dashoffset",1032)
.duration(20000)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
<svg width= "500" height="300"></svg>