d3js 概念

Selections

有些像是jquery的选择器

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "white", null);
}

这样一段,用d3的selections可以很简洁的实现.

d3.selectAll("p").style("color", "white");

Dynamic Properties

结合select,可以动态的改变属性.

随机改变

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

交叉颜色

d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "#fff" : "#eee";
});

根据给定的数,来设定字体大小

d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

Enter and Exit

要注意d3的链式开发,习惯了就很舒服了.

Enter 和 Exit 就是这里面容易混淆概念的东西.

例子

看一下这一段

d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

目的是为了新增p,并制定p里面的内容.

  • select(“body”) 能找到值
  • selectAll(“p”) 正常的应该是选取到空的
  • data([4, 8, 15, 16, 23, 42]) 是将选取到的值与提供的数组进行数据绑定,绑定后实际上会划分为三种数据组.(可以跳过去先看三种数据组)
  • enter() 选出新增的未绑定的这一组
  • append(“p”) 来增加 p
  • text 设定p的内容

对应data的三种数据组

  • update
// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

选出已经绑定了数据的这部分p,设置他的内容.

  • enter
// Enter…
p.enter().append("p")
    .text(String);

接上面的代码,选出未找到匹配的p的这部分数组,增加p与其绑定,并设置text

  • exit
// Exit…
p.exit().remove();

找到与数组未匹配上的p,删除它. 这个概念实际上看 http://mbostock.github.io/d3/tutorial/circle.html 的 binding data那一节,会相当清楚. 又找到了一个更清楚的章节,全是再说这个 http://bost.ocks.org/mike/join/

Transitions

d3 考虑了要做很有动感的可视化. 在动作前加入

transition().duration(1750)

就可以实现渐变的动画了,duration的单位是毫秒 比如

d3.select("body")
    .transition().duration(2750)
    .style("background-color", "green") // make the body green
  .transition().duration(8750)
    .style("background-color", "red"); // then transition to red

[d3js bar 2 读书笔记](d3js bar 2 读书笔记.md)