> For the complete documentation index, see [llms.txt](https://miya-d3.gitbook.io/turior/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://miya-d3.gitbook.io/turior/svgshape.md).

# chapter-2 d3 svg shape

## style()

设置样式

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

## 创建画布

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

## 节点属性

属性列表

![](https://2325800184-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAbbjuBBZkc46mRixxv%2F-LAbta1otpbs3rlV6Lwa%2F-LAc-BSvtbKR87BhUHnX%2Fimage.png?alt=media\&token=c1621eb6-f316-49b5-a921-96b26ad3440b)

### circle 属性

* cx  相对父级的横向偏移量
* cx  相对父级的纵向偏移量
*  r  半径
* fill 填充颜色

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

### rectangle 属性

* width: 矩形宽度 （也可用于svg 画布）
* height: 矩形高度

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

### line 属性

* x1 , y1 ,x2, y2  线的起点和终点
* stroke: 线条颜色
* stroke-width: 线条宽度

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