绘制条形图

根据数据值来编码颜色值。 （对于这个条形图而言， 这样做叫做双重编码， 即同样的数据值被编码成两种可见的特性： 条形高度和颜色。 ）通过数据生成颜色也很简单， 同样只要写一个接收 d 作为参数的自定义函数即可。

.attr("fill", function(d) {
  return "rgb(0, 0, " + (d * 10) + ")";
});

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
    11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var w = 500;
var h = 100;
var barPadding = 1;
var svg = d3.select("body").append("svg")
              .attr("width", w).attr("height", h);

svg.selectAll("rect") // 条形图
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i) {
      return i * (w / dataset.length);
    })
    .attr("y", function (d) {
      return h - d * 4;
    })
    .attr("width", w / dataset.length - barPadding)
    .attr("height", function (d) {
      return d * 4;
    })
    .attr("fill", function (d) {
      return "rgb(0, 0, "+ (d * 10) +")";
    });

svg.selectAll("text") // 标签
    .data(dataset)
    .enter()
    .append("text")
    .text(function (d) {
      return d;
    })
    .attr("x", function (d, i) {
      return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
    })
    .attr("y", function (d) {
      return h - (d * 4) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white") // 填充
    .attr("text-anchor", "middle") // 居中