2

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>
lucky1928
  • 8,708
  • 10
  • 43
  • 92
  • Should that be "ellipse"? – ccprog Dec 27 '21 at 22:48
  • You're trying to approximate an ellipse with four [cubic bezier](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#b%C3%A9zier_curves) curves, but for each curve (quarter-ellipse), you put the two control points in the same "corner". Those control points must be placed more carefully. See for example https://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%c3%a9zier-curves – Sphinxxx Dec 28 '21 at 00:21

2 Answers2

2

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>
ccprog
  • 20,308
  • 4
  • 27
  • 44
  • Good to know, if draw circle, should I use bezier or A command? – lucky1928 Dec 28 '21 at 18:46
  • A circle is a special kind of ellipse, so use the A command. For segments smaller than 1/4 of a full circle, the cubic bezier can approximate an arc with less than 0.1% error. Discussed [here](https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Properties). – ccprog Dec 28 '21 at 19:34
1

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>
beetlej
  • 1,841
  • 4
  • 13
  • 27