使用D3绘制SVG图形与制作条形图

# 使用 D3 绘制 SVG 图形与制作条形图 ## 1. SVG 基础与创建 SVG 元素的所有属性都以属性的形式指定，即作为键值对包含在每个元素标签内，例如 `<element property="value"></element>`，这与 HTML 类似。我们可以使用 D3 的 `append()` 和 `attr()` 方法来创建新的 SVG 元素并设置其属性，因为 SVG 元素和 HTML 元素一样存在于 DOM 中。 创建 SVG 元素的基本代码如下： ```javascript d3.select("body").append("svg"); ``` 不过，建议使用以下方式创建并保存对 SVG 对象的引用： ```javascript var svg = d3.select("body").append("svg"); svg.attr("width", 500) .attr("height", 50); ``` 也可以将代码写成一行： ```javascript var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 50); ``` 为了方便代码的维护和修改，建议将宽度和高度值存储在变量中： ```javascript var w = 500; var h = 50; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); ``` ## 2. 数据驱动的形状 接下来，我们使用一个数据集来创建圆形： ```javascript var dataset = [ 5, 10, 15, 20, 25 ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("circle"); ``` 上述代码中，`selectAll()` 返回对所有圆形的空引用，`data()` 将数据绑定到即将创建的元素上，`enter()` 返回新元素的占位符引用，`append()` 最终将圆形添加到 DOM 中。 为了给这些圆形设置位置和大小，我们可以使用以下代码： ```javascript circles.attr("cx", function(d, i) { return (i * 50) + 25; }) .attr("cy", h/2) .attr("r", function(d) { return d; }); ``` - `cx`：圆形中心的 x 坐标，通过 `(i * 50) + 25` 计算得出，其中 `i` 是当前元素的索引，从 0 开始计数。 - `cy`：圆形中心的 y 坐标，设置为 SVG 高度的一半，使所有圆形在垂直方向上居中。 - `r`：圆形的半径，设置为对应数据值。 ## 3. 为形状添加颜色 颜色填充和描边也是可以使用相同方法设置的属性。以下代码为圆形添加颜色： ```javascript circles.attr("fill", "yellow") .attr("stroke", "orange") .attr("stroke-width", function(d) { return d/2; }); ``` ## 4. 制作条形图 ### 4.1 旧的条形图 旧的条形图使用 `div` 元素创建，代码如下： ```javascript var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar") .style("height", function(d) { var barHeight = d * 5; return barHeight + "px"; }); ``` ### 4.2 新的 SVG 条形图 #### 4.2.1 创建 SVG 元素 ```javascript var w = 500; var h = 100; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); ``` #### 4.2.2 创建矩形元素 ```javascript svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 20) .attr("height", 100); ``` 上述代码创建的矩形会重叠，因为它们的 `x`、`y`、`width` 和 `height`