使用简单图形D3.js绘制笑脸，svg画布

//首先在style定义图形的类，可以修改图形的颜色等属性
.mycircle{
fill:#fad458;
stroke-width:1px;
}
.椭圆形{
fill:#b67501;
stroke-width:1px;
}
.椭圆形2{
fill:#b67501;
stroke-width:1px;
}
.mycircle2{
fill:#b67501;
stroke-width:1px;
}
.rect{
fill:#fad458;
stroke-width:1px;
}
.三角形{
fill:#b67501;
stroke-width:1px;
}
.BG{
fill:green;
stroke-width:1px;
}

//在svg里设置圆形、椭圆形等图形拼成笑脸
var body=d3.select(“body”);
var svg=body.append(“svg”)//append是增加
.attr(“width”,400)
.attr(“height”,400)
.attr(“fill”,"#0a630e")
.attr(“class”,“BG”);
svg.append(“rect”)
.attr(“x”,0)
.attr(“y”,0)
.attr(“width”,1000)
.attr(“height”,1000)
svg.append(“circle”)
.attr(“cx”,100)
.attr(“cy”,100)
.attr(“r”,80)
.attr(“class”,“mycircle”);
svg.append(“ellipse”)
.attr(“cx”,70)
.attr(“cy”,65)
.attr(“rx”,15)
.attr(“ry”,20)
.attr(“class”,“椭圆形”);
svg.append(“ellipse”)
.attr(“cx”,130)
.attr(“cy”,65)
.attr(“rx”,15)
.attr(“ry”,20)
.attr(“class”,“椭圆形2”);
svg.append(“circle”)
.attr(“cx”,100)
.attr(“cy”,125)
.attr(“r”,40)
.attr(“class”,“mycircle2”);
svg.append(“rect”)
.attr(“x”,60)
.attr(“y”,85)
.attr(“width”,80)
.attr(“height”,50)
.attr(“class”,“rect”);

本文地址：https://blog.csdn.net/miigol/article/details/107392906