d3.js - draw ellipse shape with 4 points by svg path - svg

Question

I would like to draw a ellipse shape by svg path. I use below code but the shape looks like a round corner rectangle.
How can I adjust the parameter to get a eclipse path!
demo()
function demo() {
var width = 400
var height = 200
var margin = {left:20,top:20,right:20,bottom:20}
var svg = d3.select('body').append("svg")
.attr('width',width + margin.left + margin.right)
.attr('height',height + margin.top + margin.bottom)
.style('border','2px solid red')
var g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`)
var data = [[0,0,400,100]]
g.selectAll('node')
.data(data)
.enter()
.append('path')
.attr('class','node')
.attr('stroke','black')
.attr('stroke-width',2)
.attr('fill','none')
.attr('d',function(d) {
var w = d[2]
var h = d[3]
var ax = d[0]
var ay = d[1] + h/2
var bx = ax + w/2
var by = ay + h/2
var cx = ax + w
var cy = ay
var dx = bx
var dy = d[1]
add_dot(g,[[ax,ay],[bx,by],[cx,cy],[dx,dy]])
var path = ['M',ax,ay,'C',ax,by,ax,by,bx,by,
cx,by,cx,by,cx,cy,
cx,dy,cx,dy,dx,dy,
ax,dy,ax,dy,ax,ay]
return path.join(' ')
})
function add_dot(g,data) {
g.selectAll('dots')
.data(data)
.join('circle')
.attr('class','dots')
.attr('cx',d => d[0])
.attr('cy',d => d[1])
.attr('r',5)
.attr('fill','red')
}
}
<script src="https://d3js.org/d3.v6.min.js"></script>

Answer 1

The path C command draws a cubic bezier segment, which can approximate an ellipse, but is not exact. The A command draws an arc segment, a sector of an ellipse.
demo()
function demo() {
var width = 400
var height = 200
var margin = {left:20,top:20,right:20,bottom:20}
var svg = d3.select('body').append("svg")
.attr('width',width + margin.left + margin.right)
.attr('height',height + margin.top + margin.bottom)
.style('border','2px solid red')
var g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`)
var data = [[0,0,400,100]]
g.selectAll('node')
.data(data)
.enter()
.append('path')
.attr('class','node')
.attr('stroke','black')
.attr('stroke-width',2)
.attr('fill','none')
.attr('d',function(d) {
var w = d[2]/2
var h = d[3]/2
var ax = d[0]
var ay = d[1] + h
var bx = ax + w
var by = ay + h
var cx = ax + w*2
var cy = ay
var dx = bx
var dy = d[1]
add_dot(g,[[ax,ay],[bx,by],[cx,cy],[dx,dy]])
var path = ['M',ax,ay,'A',w,h,0,0,0,bx,by,
w,h,0,0,0,cx,cy,
w,h,0,0,0,dx,dy,
w,h,0,0,0,ax,ay]
return path.join(' ')
})
function add_dot(g,data) {
g.selectAll('dots')
.data(data)
.join('circle')
.attr('class','dots')
.attr('cx',d => d[0])
.attr('cy',d => d[1])
.attr('r',5)
.attr('fill','red')
}
}
<script src="https://d3js.org/d3.v6.min.js"></script>

Answer 2

demo()
function demo() {
var width = 400
var height = 200
var margin = {left:20,top:20,right:20,bottom:20}
var svg = d3.select('body').append("svg")
.attr('width',width + margin.left + margin.right)
.attr('height',height + margin.top + margin.bottom)
.style('border','2px solid red')
var g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`)
var data = [[0,0,400,100]]
g.selectAll('node')
.data(data)
.enter()
.append('path')
.attr('class','node')
.attr('stroke','black')
.attr('stroke-width',2)
.attr('fill','none')
.attr('d',function(d) {
var w = d[2]
var h = d[3]
var ax = d[0]
var ay = d[1] + h/2
var bx = ax + w/2
var by = ay + h/2
var cx = ax + w
var cy = ay
var dx = bx
var dy = d[1]
add_dot(g,[[ax,ay],[bx,by],[cx,cy],[dx,dy]])
var path = ['M',ax,ay,'C',ax,(ay+by)/2,(ax+bx)/2,by,bx,by,
(bx+cx)/2,by,cx,(by+cy)/2,cx,cy,
cx,(cy+dy)/2,(cx+dx)/2,dy,dx,dy,
(dx+ax)/2,dy,ax,(dy+ay)/2,ax,ay]
return path.join(' ')
})
function add_dot(g,data) {
g.selectAll('dots')
.data(data)
.join('circle')
.attr('class','dots')
.attr('cx',d => d[0])
.attr('cy',d => d[1])
.attr('r',5)
.attr('fill','red')
}
}
<script src="https://d3js.org/d3.v6.min.js"></script>