d3.select('body').append('svg').attr('width', 200).attr('height', 200)这段代码中.attr()添加的元素为什么作用于svg上而不是body上

### 回答1：
这段代码中的.attr()方法是在向文档中添加元素的过程中使用的，它被调用在上一个元素的选择器上，也就是前面的d3.select(body).append(svg)中的svg元素上。所以这个.attr()方法添加的属性作用于svg上而不是body上。

例如，在这段代码中，.attr("width", 200)会向svg元素添加一个宽度为200像素的属性，而不是向body元素添加一个宽度为200像素的属性。

### 回答2：
这段代码 d3.select('body').append('svg').attr('width', 200).attr('height', 200) 的作用是在 body 元素中添加一个 SVG 元素，并为该 SVG 元素设置宽度和高度。

d3.select('body') 的意思是选择文档中的 body 元素。然后 .append('svg') 是将一个新的 SVG 元素添加到选中的 body 元素中。接着通过 .attr('width', 200) 和 .attr('height', 200) 分别给该 SVG 元素设置宽度和高度。

在这段代码中，.append('svg') 表示添加的元素是一个 SVG 元素，它是一个具有特定属性和方法的独立的图形容器。而 .attr('width', 200) 和 .attr('height', 200) 是为这个 SVG 元素设置宽度和高度。

所以，这段代码中的 .attr() 方法作用的对象是前一个方法 (d3.select('body').append('svg')) 所返回的 SVG 元素，而不是 body 元素。以此来达到在 body 元素中添加 SVG 元素并设置宽度和高度的效果。

### 回答3：
在这段代码中，d3.select('body')是选择了body元素，然后通过.append('svg')添加了一个svg元素作为body元素的子元素。

接着，通过连续使用.attr()方法，首先使用.attr('width', 200)设置了添加的svg元素的宽度为200，然后使用.attr('height', 200)设置了添加的svg元素的高度也为200。

这段代码中.attr()方法添加的元素作用于svg上而不是body上的原因是因为使用了d3.select('body')选择的是body元素，而后面的.append('svg')是在body元素内添加一个svg元素。接着使用.attr()方法设置svg元素的宽度和高度，因此.attr()方法的作用对象是最近添加的svg元素。

总结来说，这段代码使用.attr()方法设置的属性作用于svg元素而不是body元素，是因为选择了body元素，然后在其内部添加了一个svg元素，并在svg元素上设置了宽度和高度。