Js+SVG 柱状图 & D3+SVG 柱状图

Js+SVG 柱状图

D3+SVG 柱状图

Js vs D3

效果预览

两个段代码实现的效果是相同的.

总的来说, 通过比较上述代码, 可以看的出来:

1. 创建 SVG 元素

Js 创建一个 SVG 元素相对复杂, 需要指定 namespaceURI, 通常这个值等于 http://www.w3.org/2000/svg(也可以点击网址查看更多信息), 写作 document.createElementNS('http://www.w3.org/2000/svg', 'svg');

虽说看起来挺长的, 不过总的来说也并不是那么复杂就是了. 另外, 关于 namespaceURI, vscode 的提示信息内可以复制到, 其他编辑器并未测试.

vscode namespaceURI 提示

D3 创建一个 SVG 元素就很简单了, Selection.append('svg');.

2. 编程方式

Js 是普通的逐行编写.

D3 看起来更加倾向于链式.

3. 批量生成元素

Js 需要书写遍历函数, 在循环体内编写创建 SVG 元素的代码.

D3 不需要我们自己来写遍历函数, 采用了 .data(dataset).enter().append(元素名) 的方式自动补全元素.

4. 补齐元素(本例并不明显)

这个所谓的补齐元素的概念, 其出发点可能是为了性能优化吧, 具体来讲就是:

当文档中已经存在了 N 个 rect 元素(就拿 rect 元素举例), 然后由于某种原因, 原本对应这 N 个 rect 元素的数组发生了改变, 变成了 M 个.

此时如果不考虑那么多, 直接移除所有的 rect 在重新遍历一遍显然也不是不行! 不过总感觉如此大量的删/插元素并不是什么好的选择.

可能是因此, D3 才提出了补齐/删齐元素的说法, 以求尽量少的删/插元素吧.

总之此时:

Js 可能需要计算了, 比如现有 N 个元素, M 个数据; 需要划分 3 中情况来分别进行编写.

D3 提供了一段通用的代码

// Update 情形2
var p = d3.select("body")
    .selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });

// Enter 情形1
p.enter().append("p")
    .text(function(d) { return d; });

// Exit 情形3
    p.exit().remove();

结语

就制作一个简单的条形图而言, 还没有特别强烈的感到使用 D3 能够带来莫大的好处.