d3.js

Question

我想通过svg路径画一个椭圆。我使用下面的代码，但形状看起来像一个圆角矩形。如何调整参数获取eclipse路径！

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

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>

Answer 2

路径C command draws a cubic bezier segment, which can approximate an ellipse, but is not exact. The A command画了一个弧段，椭圆的一个扇形

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>

d3.js - 通过 svg 路径绘制具有 4 个点的椭圆形状

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

svg