读《数据可视化实战》笔记

解决全局变量命名空间变量名重复冲突（技巧）

• 只在函数里面声明变量。虽然有时候也不是绝对可行，但是函数级作用域可以防止其本地变量跟其他变量发生冲突。
• 只声明一个全局对象，然后把本来想作为全局变量的值都作为这个对象的属性。

var Vis = {};   //声明空的全局对象
Vis.id = 1;
Vis.name = 'dashuaibi';
// 这样所有的变量都被关在了全局对象Vis里面，因此就不会再污染全局命名空间

---

绘制条形图

根据数据值来编码颜色值。 （对于这个条形图而言， 这样做叫做双重编码， 即同样的数据值被编码成两种可见的特性： 条形高度和颜色。 ）通过数据生成颜色也很简单， 同样只要写一个接收 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") // 居中

---

绘制散点图

散点图

var dataset = [
                  [ 5, 20 ],
                  [ 480, 90 ],
                  [ 250, 50 ],
                  [ 100, 33 ],
                  [ 330, 95 ],
                  [ 410, 12 ],
                  [ 475, 44 ],
                  [ 25, 67 ],
                  [ 85, 21 ],
                  [ 220, 88 ]
  ];
  var w = 500;
  var h = 100;
  var svg = d3.select("body")
              .append("svg")
              .attr("width", w)
              .attr("height", h);
  svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", function (d) {
        return d[0];
      })
      .attr("cy", function (d) {
        return d[1];
      })
      .attr("r", function (d) {
        return Math.sqrt(h - d[1]);
      });
  svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function (d) {
        return d[0] + "," + d[1];
      })
      .attr("x", function (d) {
        return d[0];
      })
      .attr("y", function (d) {
        return d[1];
      })
      .attr("fill", "red")
      .attr("font-size", "11px")
      .attr("font-family", "sans-serif");