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

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>

CodePudding user response：

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>

CodePudding user response：

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>