# 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)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://miya-d3.gitbook.io/turior/svgshape.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.