Greatings

Have a nice day

Hey There

网站正在建设中，部分功能尚未完工

D3.js v3到v4 改动整理

2017-02-27
#d3

重大改动一览

  • 模块化
  • 命名空间改动
  • 支持canvas渲染

1. 模块化：

原文：D3 4.0 is modular. Instead of one library, D3 is now many small libraries that are designed to work together. You can pick and choose which parts to use as you see fit. Each library is maintained in its own repository, allowing decentralized ownership and independent release cycles. The default bundle combines about thirty of these microlibraries.

译文：D3 4.0变得更加模块化了。与之前的单个库文件不同，D3现在是一个被设计为协同工作的多个更小的库文件。你可以挑选你觉得适合的一部分来使用。每个小模块都在其自己的版本库中维护，允许分开所有和拥有独立的发行周期。默认bundle集合了约三十个这些微型库。

简单来说，D3 v3是单个大文件，不管你使用功能多少都要包含全部。而D3 v4是一个小模块集，你可以根据需要选择其中的一个或多个模块。

例如，https://github.com/d3/d3-scale可以通过npm install d3-scale来安装。

需要注意的是每个模块都有自己的依赖，使用时要确保所需的每一项都被包含在内。例如：

<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>

大多时候你会需要一个辅助构建系统帮你打包JS文件。Mike Bostock建议使用Rollup，这是一个示例。

最后，你依然可以通过加载v4完整版文件来使用整个v4的功能。

<script src="https://d3js.org/d3.v4.js"></script>

2. 命名空间

D3 v3的API是逻辑命名空间。例如：

  • d3.scale.linear
  • d3.scale.ordinal
  • d3.time.format
  • d3.svg.axis

在D3 v4中，所有模块共有一个扁平的命名空间d3.，提高了可读性

原文：For example, with v3.x, to specify top orientation and scale for your visualization axis in d3, this was the way to go d3.svg.axis().scale(xscale).orient(“top”). Now, this has been changed to d3.axisTop(xscale)

译文： 例如，使用v3.x时，要想在d3中的为可视化轴指定顶部方向和比例尺，需要使用d3.svg.axis().scale(xscale).orient(“top”)。现在已改为d3.axisTop(xscale)。

好处是现在写法变得更简洁了，坏处是如果现在正在使用v3.x的命名空间，那么v4就不能用了，如果引入v4的库，就会导致报错。

一些方法的改变

要想得到v4的修改情况，最好的方法是查看changelog。

Axis（轴）
Data Parsing（数据分析）
scale（比例尺）
var x = d3.scaleOrdinal().domain(["a", "b", "c"]).rangeBands([0, width]);
// band size is x.rangeBand()

'现在变成↓'

var x = d3.scaleBand().domain(["a", "b", "c"]).range([0, width]);
// band size is x.bandwidth()
随机数（Random Numbers）
形状和功能（Shapes and Paths）
时间间隔（Time Intervals）

3. Canvas渲染

在v3中，D3的仅支持使用SVG渲染。从v4开始，许多渲染helpers现在有一个新的context method，让你传递一个Canvas context来渲染。

例如：

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });
    
//渲染SVG
path.datum(data).attr("d", line);

//渲染Canvas
line.context(context)(data);

你可以在shapes module中查看更多的示例：d3-shape。

4. 选择器(Selections)

  • 选择器不再通过扩展其原型来继承子类。他们现在是普通的对象。

  • 有一个新方法.node可以将选择内的所有节点作为数组检索。

  • 选择器是不可变的（父节点和元素从不改变，因此其属性也不变。）例如，selection.sort将返回一个新的选择器。

  • selection.append现在按照数据绑定的顺序插入元素，而不是直接插入到末尾：

例如，在v3中：

d3.select("body").selectAll("span").data([1, 3, 5], String).enter().append("span").text(String);
d3.select("body").selectAll("span").data([1, 2, 3, 4, 5], String).enter().append("span").text(String);
// 13524

在v4中：

d3.select("body").selectAll("span").data([1, 3, 5], String).enter().append("span").text(String);
d3.select("body").selectAll("span").data([1, 2, 3, 4, 5], String).enter().append("span").text(String);
// 12345

5. 其他小改动

  • 用严格模式（strict mode）改写
  • d3-geo引入fitSize
  • 默认的UMD bundle是匿名的（如果没有检测到AMD或CommonJS，则不会导出d3全局对象）
  • 仅使用ASCII变量名和ASCII字符串文字。 没有更多明确的要求是UTF-8。
  • d3.format现在具有文本格式：d3.format（“> 10c”）（“foo”）; //“foo”
  • 可以基于国家设置default locale，以便使用d3.formatDefaultLocale链接进行某些数字解析
  • 用于指数和均匀分布的新随机数生成器。
  • d3.xhr现在是d3.request，它还支持通过调用.user和.password身份验证。

6. v4新功能

  • 颜色，插值器，比例尺

    • 颜色有透明度（rgba，hsla等）。
    • 新增Cubehelix颜色空间。
    • 新增连续型颜色比例尺：绿松石（Viridis）和周期性的彩虹（cyclical Rainbow）。
    • 新增点比例尺和段比例尺替代以前的ordinal.rangeBands和ordinal.rangePoints。
    • 新增基本样条曲线插值器（例如连续的ColorBrewer）。

  • 形状和布局。

    • 形状支持渲染成Canvas。
    • 修复了cardinal 和 monotone样条曲线。
    • 增加了参数化的 Catmull–Rom 和natural样条曲线。
    • 新的确定，可扩展的速度Verlet力布局。
    • 新的圆形填充布局。
    • 新的可扩展的矩形树布局；改良squarified treemaps；新增binary treemaps。
    • 新增d3.stratify用于处理行列式层次型数据（以前只支持JSON）。
    • 更快，可变的，非递归的四叉树。
    • 泰森多边形暴露有用的拓扑信息。

  • 选择器，过渡，缓动和定时器。

    • 选择器和过渡现在是不变的，提供一个简洁的界面。
    • 新增selection.raise， selection.lower 和selection.dispatch 方法。
    • 时间在后台是冻结的，避免无意识的操作。
    • 定时器可以在外部停止。
    • 过渡现在支持 CSS 变换。
    • 可使用selection.interrupt取消过渡。
    • 更简单的过渡链（d3.active，transition.delay）。
    • 为同质转换提供更好的性能（例如元素间共享插值器）。
    • 更好地执行和持续过渡状态。
    • 修复松紧带缓冲函数和弹性缓冲函数。

  • 其他

    • 默认的轴样式。
    • 更好的刷子交互。
    • 内置的用于并行加载数据的异步队列。
    • d3.ticks API。

References：

D3 changelod

Vykthur from http://denvycom.com

Irene Ros from iros.github.io

tianxuzhang from github.com/tianxuzhang/