d3画svg基本图形以及贝塞尔曲线

svg中预定义了7中形状元素，分别是矩形(rect)、圆形(circle)、椭圆(ellipse)、
线段(line)、折线(polyline)、多边形(polygon)、路径(path)。

1.矩形

        var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
        _svg.append("rect")
                .attr("x","20")
                .attr("y","20")
                .attr("width","20")
                .attr("height","120")
                .style("fill","blue");

p1.png

2.圆角矩形

var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
        _svg.append("rect")
                .attr("x","100")
                .attr("y","100")
                .attr("rx","10")
                .attr("ry","10")
                .attr("width","80")
                .attr("height","50")
                .style("fill","red")
                .style("stroke","steelblue")
                .style("stroke-width",'2')
                .style("opacity","0.5");

p3.png

3.圆形

var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
        _svg.append("circle")
                .attr("cx","100")
                .attr("cy","100")
                .attr("r","50")
                .style("fill","yellow")
                .style("stroke","blue")
                .style("stroke-width",'2');

p2.png

4.椭圆

var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
_svg.append("ellipse")
                .attr("cx","100")
                .attr("cy","100")
                .attr("rx","100")
                .attr("ry","50")
                .style("fill","green")
                .style("opacity","0.5");

p4.png

5.线段

var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
_svg.append("line")
                .attr("x1","100")
                .attr("y1","100")
                .attr("x2","200")
                .attr("y2","300")
                .style("stroke","steelblue")
                .style("stroke-width","2");

p5.png

6.折线

var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
var points = [[100,100],[150,150],[150,200],[100,250],[50,200],[50,150]];       
        _svg.append("polyline")
                .attr("points",points)
                .style('fill','none')
                .style("stroke","steelblue")
                .style("stroke-width","2");

p7.png

7.多边形

var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
var points = [[100,100],[150,150],[150,200],[100,250],[50,200],[50,150]];       
_svg.append("polygon")
                .attr("points",points)
                .style('fill','yellowgreen')
                .style("stroke","steelblue")
                .style("stroke-width","2");

p6.png

8.路径
8.1直线类

var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
_svg.append("path")
                .attr("d","M30,50 L200,200")
                .style("stroke","black")
                .style("stroke-width","1");
_svg.append("path")
                .attr("d","M30,50 H200")
                .style("stroke","red")
                .style("stroke-width","1");
_svg.append("path")
                .attr("d","M30,50 V200")
                .style("stroke","blue")
                .style("stroke-width","1"); 

p8.png
8.2曲线类
8.2.1二次贝塞尔曲线

        var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
  
        let dx = 40,x1=50,y1=50,x2=300,y2=300;
        let dy = Math.round(Math.abs( ( ( y2 - y1 ) / ( x2 - x1 ) ) * dx ));
        //向右上弯曲
        let cpx = Math.round(( x1 + x2 ) / 2 + dx);
        let cpy = Math.round(( x1 + x2 ) / 2 - dy);

        var path = d3.path();
        path.moveTo(x1,y1);
        path.quadraticCurveTo(cpx,cpy,x2,y2);
        
        _svg.append('path')
            .attr('d', path.toString())
            .style('fill','none')
            .style('stroke','red')
            .style('stroke-width','2');     

p9.png

8.2.2三次贝塞尔曲线

        var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
        
        let dx = 10, dy = 100, x1 = 50, y1 = 50, x2 = 300, y2 = 300;
        var path = d3.path();
        let cpx1 = x1 - dx;
        let cpy1 = y1 + dy;
        let cpx2 = x2 + dx;
        let cpy2 = y2 - dy;
        path.moveTo(x1,y1);
        path.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x2,y2);

        _svg.append('path')
            .attr('d', path.toString())
            .style('fill','none')
            .style('stroke','red')
            .style('stroke-width','2');  

p10.png

8.2.3弧线

        var _svg = d3.select("body")
                .append("svg")
                .attr("width","400")
                .attr("height","300");
        
        var path = d3.path();
        path.moveTo(100,120);
        path.arc(100,120,60,-Math.PI,-0.5*Math.PI);
        
        _svg.append('path')
            .attr('d', path.toString())
            .style('fill','lightgrey')
            .style('stroke','red')
            .style('stroke-width','2');  

p12.png