chapter-2 d3 svg shape

style()

设置样式

d3.select('body')
.append('p')
.style('color','red')
.text("Hi,what's up?");

创建画布

var canvas = d3.select('body')
.append('svg')
.attr('width',500)
.attr('height',500);

节点属性

属性列表

circle 属性

• cx 相对父级的横向偏移量

• cx 相对父级的纵向偏移量

• r 半径

• fill 填充颜色

var circle = canvas.append('circle')
.attr('cx',250)
.attr('cy',250)
.attr('r',50)
.attr('fill','red')

rectangle 属性

• width: 矩形宽度 （也可用于svg 画布）

• height: 矩形高度

var rect = canvas.append('rect')
        .attr('width',100)
        .attr('height',50);

line 属性

• x1 , y1 ,x2, y2 线的起点和终点

• stroke: 线条颜色

• stroke-width: 线条宽度

var line = canvas.append('line')
        .attr('x1',0)
        .attr('y1',10)
        .attr('x2',200)
        .attr('y2',200)
        .attr('stroke','green')
        .attr('stroke-width',1)