【 D3.js 入门系列 — 3 】做一个简单的图表！

图1. 柱形图

1. 柱形图

前几章的例子，都是对文字进行处理。本章中将用 D3 做一个简单的柱形图。制作柱形图有很多种方法，比如用 HTML 的 <div> 标签，或在 SVG 上绘制。

SVG ，即可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义图形，可在 W3School 学习 SVG 的相关语法，不需要记住所有标签，用的时候再查即可。

先看下面的代码：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
        var width = 600;
        var height = 600;
        var svg = d3.select("body").append("svg")
                       .attr("width",width)
                       .attr("height",height);

        var dataset = [ 30 , 20 , 45 , 12 , 21 ];

        svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("x",10)
           .attr("y",function(d,i){
                return i * 30;
           })
           .attr("width",function(d,i){
                return d * 10;
           })
           .attr("height",28)
           .attr("fill","red");

</script>

结果如图1所示，代码的解说为：

第 3 – 4 行：定义两个变量，代表 SVG 绘制框的宽和高。

第 5 – 7 行：选择 <body> 后，在 <body> 里插入 <svg> ，用 attr 来给 <svg> 添加属性。用 attr 添加属性的效果类似于在 HTML 中 <a href=”….”></a> 给 a 添加属性 href 。

第 9 行：要使用的数据。

第 11 行：表示在 <svg> 中选择所有的 <rect> 元素，但是实际上这时候 <svg> 中还不存在 <rect> 元素。这是 D3 一个比较特殊的地方，即它能够选择一个空集。先不要惊讶，请看第 13 行。

第 12 行：表示将数据绑定要这个 <svg> 上。

第 13 行： enter() 表示当所需要的元素（ <rect> ）比绑定的数据集合的元素（ dataset ）少时，自动添加位置，使得与数据集合的数量一样多。这里很重要，后面章节会详细说明。

第 14 行：紧接上一行，添加元素 <rect> 。11-14行经常一起出现，要注意，如不理解，可暂时不必深究。

第 15 – 27 行：设定 <rect> 元素的各项属性，如位置，长短，颜色等。

2. 比例尺

上面的柱形图，对于每个柱形都是手动设定的长度，实际运用中我们常常希望给定一个最大值，让柱形自动根据这个最大值调整百分比，显示出来，怎么办呢？插入如下代码:

var wx = d3.scale.linear()
                .domain([0,d3.max(dataset)])
                .range([0,500]);

d3.scale.linear() 用于生成一个线性函数的比例尺，它的初始定义域 domain 为 [ 0 , 1 ] ，初始值域 range 为 [ 0 , 1 ] ，这里的 [ ] 表示的是范围。现在我们把 domain 设定为 [ 0 , d3.max(dataset) ] ，即0到 dataset 中的最大值。 range设定为0到500。这表示如果数据是45，则返回500，如果是30，则返回333.333。

比例尺赋值给了 wx，要注意这里的 wx 是一个函数。目前暂不深究。

接下来只要在添加 <rect> 时给 width 属性赋值的时候换成变量 wx 即可。

svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("x",10)
           .attr("y",function(d,i){
                return i * 30;
           })
           .attr("width",wx)           //注意这里
           .attr("height",28)
           .attr("fill","red");

这样，宽度会随着绑定的数据自动变化。

时间： 2024-12-21 13:42:43

【 D3.js 入门系列 — 3 】做一个简单的图表！

1. 柱形图

2. 比例尺