使用SVG绘制条形图精.docxVIP

PAGE PAGE # / 4 使用SVG绘制条形图 使用SVG绘制条形图 摘 要：这一节主要介绍了使用 SVG 绘制条形图的方法。并给出相关代码。 关键词： SVG；D3 ；动态缩放 1创建SVG元素 首先，需要确定新 SVG 元素的大小： var w = 500; // 宽度和高度 var h = 100; 当然，你可以把 w 和 h 改成其他名字，比如 svgWidth 和 svgHeight 。你觉得怎么明确，就怎么命名。 JavaScript 程序员非常注重效率，因此你会经常看到一些单个字母的变量，代码间也没有空格，很难看懂 却能很快写出来。然后，告诉 D3 创建空 SVG 元素，并将其添加到 DOM 中： var svg = d3.select(body) .append(svg) .attr(width, w) .attr(height, h); 这些代码会在结束的 /body 的标签前面插入新的 svg 元素，将其宽度和高度设置为 500 像素和 100 像素。同时，代码还把返回的结果保存在了变量 svg 中，因此后面可以方便地引用这个 SVG 元素，而不 必每次再使用 d3.select(svg) 之类的代码重新选择。 接下来，不创建 div ，而生成矩形元素 rect 并将它们添加到 svg 中： svg.selectAll(rect) .data(d