D3js基础课05：使用 D3js 创建 SVG

我们先回顾一下 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，您总是必须首先选择要在上面操作的内容，即使它还不存在。这有点复杂，我们下一节课将对此进行更多解释。