我们先回顾一下 SVG 标签
<svg width="100" height="50" style="background: red;">
</svg>
使用 D3js 的代码看上去如下
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view010501"></div>
<script>
d3.select("#view010501")
.append("svg")
.attr("width", 100)
.attr("height", 50)
.style("background", "red");
</script>
另一种方法，我们可以从对象中获取属性值
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view010502"></div>
<script>
viz = {width: 100, height: 50, background: "red"}
svg = d3.select("#view010502")
.append("svg")
.attr("width", viz.width)
.attr("height", viz.height)
.style("background", viz.background);
</script>
data() 和 enter() 函数
向svg添加形状如何？让我们用不同半径的圆，将它们添加到svg中。
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view010503"></div>
<script>
radius = [5, 10, 15, 20] // define width is array
svg = d3.select('#view010503')
.append('svg');
circles = svg
.selectAll("circle")
.data(radius).enter()
.append("circle")
.attr("cx", function(d) { return 10*d})
.attr("cy", 25)
.attr("r", function(d) { return d})
</script>
代码看上去有点奇怪。我们选择了一堆不存在的圆形元素吗？嗯，是的。。。有点。对于 D3，您总是必须首先选择要在上面操作的内容，即使它还不存在。这有点复杂，我们下一节课将对此进行更多解释。
