摘要：子選集直接通過(guò)返回，和子選集分別通過(guò)和返回。截止上面也并不是非得用不可，就是一些插入操作，原生也是可以實(shí)現(xiàn)的。

相對(duì)于echart, highchart等其他圖表庫(kù)算是一個(gè)比較底層的可視化工具，簡(jiǎn)單來(lái)講他不提供任何一種現(xiàn)成的圖表，所有的圖表都是我們?cè)谒膸?kù)里挑選合適的方法構(gòu)建而成。

基于上面的理解，d3無(wú)疑會(huì)復(fù)雜很多但是也強(qiáng)大自由的多，另外因?yàn)閐3基于svg所以修改圖表的樣式和結(jié)構(gòu)也會(huì)方便很多，但是同樣是這個(gè)原因，d3的性能比canvas類(lèi)庫(kù)差了不少，dom畢竟是拖累瀏覽器性能的罪魁禍?zhǔn)住ｍ樋谔嵋痪?，d3也是可以基于canvas構(gòu)建圖表的。但是這篇文章就不提了。

對(duì)于d3我們可以簡(jiǎn)單的將其分個(gè)類(lèi)：數(shù)據(jù)處理， dom處理，事件以及其他。 其實(shí)dom和事件其實(shí)可以合到一起。

前端做可視化的時(shí)候肯定需要對(duì)數(shù)據(jù)進(jìn)行處理，d3提供了一下常用的方法。

因?yàn)閐3是基于svg所以跟dom打交道肯定是必須的，這里一定程度替代了jQuery之類(lèi)的功能。

事件的話其實(shí)就是一些交互比如滾輪，拖拽等等都是基礎(chǔ)功能可以進(jìn)行一系列組合排序

請(qǐng)求就是ajax請(qǐng)求數(shù)據(jù)源了。

數(shù)據(jù)處理就很簡(jiǎn)單了，就是對(duì)于數(shù)組和集合以及時(shí)間的一些處理方法， 比如數(shù)組求中位數(shù)方差等等，和lodash的一些方法有重合，但是還是偏向數(shù)學(xué)方面，方法有點(diǎn)多這里不一一列出了：

// array的方法
d3.min([1, 2, 3, 4]) // 1 不同于Math,min忽略NaN undefined等
d3.range(1, 10) // [1, 2 ... 10]

// collection的方法
d3.entries({foo: 42, bar: true}); // [{key: "foo", value: 42}, {key: "bar", value: true}]
var map = d3.map([{name: "foo"}, {name: "bar"}], function(d) { return d.name; });
map.get("foo"); // {"name": "foo"}
map.get("bar"); // {"name": "bar"}
map.get("baz"); // undefined

// time的方法
d3.timeDays(new Date("2014-01-11"), new Date("2014-02-12")) // 獲取2014-01-11 到2014-02-12的日期數(shù)組

上面是單純的數(shù)據(jù)處理也就是工具類(lèi)，但是d3的強(qiáng)大不僅僅在于此，d3提供了一個(gè)強(qiáng)大算法庫(kù)，比如力導(dǎo)向圖的碰撞檢測(cè)以及tick等等，這里的功能也屬于數(shù)據(jù)處理但是又跟插入dom密不可分。

d3的數(shù)據(jù)不僅僅是這些有些跟dom耦合極深沒(méi)辦法完全拎出來(lái)說(shuō)， 而且d3的api極多， 這些東西很多時(shí)候也只能邊看文檔邊做。好在d3的示例很多，基本需求都能滿足。

關(guān)于dom操作d3也提供了一系列方便的接口，比如d3.select，d3.append等等， 這部分的接口相當(dāng)多，個(gè)人也沒(méi)法一一說(shuō)明， 只能說(shuō)用法都是一樣的，和jQuery相當(dāng)類(lèi)似：

svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", 2.5);

上面的代碼是把circle跟data進(jìn)行數(shù)據(jù)綁定并插入對(duì)應(yīng)的dom節(jié)點(diǎn)(引用自鏈接)：

首先，svg.selectAll("circle") 返回一個(gè)空選集，因?yàn)楫?dāng)前 SVG 還沒(méi)有任何子元素，該選集的父節(jié)點(diǎn)是這個(gè) SVG 容器。
然后將該選集與數(shù)據(jù)綁定，產(chǎn)生三個(gè)新的子選集，分別代表三種可能的狀態(tài)：enter、update 和 exit。由于當(dāng)前選集為空，所以 update 和 exit 子選集也為空，enter 子選集就包含了每條數(shù)據(jù)對(duì)應(yīng)的元素的占位符。
update 子選集直接通過(guò) selection.data 返回，enter 和 exit 子選集分別通過(guò) selection.enter 和 selection.exit 返回。
那些缺少的元素通過(guò)對(duì) enter 子選集調(diào)用 selection.append 方法來(lái)添加到 SVG 中，這樣就為每條數(shù)據(jù)添加了一個(gè)新的圓點(diǎn)到 SVG 中。

如上都是鏈?zhǔn)讲僮?/p> 事件

不同于canvas這里可以直接觸發(fā)原生事件，讓人親切很多。

事件是指基于dom的一些交互操作，包括但不限于click等原生事件，類(lèi)似jQuery，事件是通過(guò)on進(jìn)行綁定的：

selection.on("click", function (d) {}) // this指向事件元素， d是綁定的數(shù)據(jù)可以直接使用

同時(shí)，d3提供了很多自定義事件諸如drag， zoom，brush等等，這時(shí)候就是通過(guò)call調(diào)用了：

const brush = d3.brushX()
  .extent([[50, 50], [1100, 150]])
  .on("start brush", brushed)
  .on("end", brushended)

svg.append("g")
  .call(brush)

上面是調(diào)用brush事件，同時(shí)調(diào)用相應(yīng)的回調(diào)， 都是字面意思，至于還有很多有意思的事件，都隱藏在文檔中。

這個(gè)其他就包含了很多東西， 比如異步請(qǐng)求，解析excel，動(dòng)畫(huà)等等，這里不一一說(shuō)明了， 但是如果發(fā)現(xiàn)有需求沒(méi)法實(shí)現(xiàn)不妨看看文檔，說(shuō)不定就內(nèi)置了呢。

下面給個(gè)示例，簡(jiǎn)單力導(dǎo)向圖示例jsfiddle：

核心代碼如下：

const height = 200
const width = 200

const svg = d3.select("body").append("svg")

const graph = {
    nodes: [
      { id: 1, name: "test1" },
    { id: 2, name: "test2" }
  ],
  links: [
      { source: 1, target: 2 }
  ]
}

const simulation = d3.forceSimulation() 
  .force("charge", d3.forceManyBody().strength(-700).distanceMin(100).distanceMax(1000)) 
  .force("link", d3.forceLink().id(d => d.id)) 
  .force("center", d3.forceCenter(width / 2, height / 2))
  
const link = svg.selectAll("link")
  .data(graph.links)
  .enter()
  .append("line")
  .attr("class", "link")  

const node = svg.selectAll("node")
  .data(graph.nodes)
  .enter().append("g")
  .attr("class", "node")
  
node.append("circle")
    .attr("r", 13)
    .attr("fill", "#999")

node.append("text")
  .attr("dx", -18)
  .attr("dy", 8)
  .style("font-family", "overwatch")
  .style("font-size", "18px")
  .text(d => d.name)


const ticked = function () {
  link.attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2",  d => d.target.y);
    
  node.attr("transform", d => `translate(${d.x}, ${d.y})`)
}


const { nodes, links } = graph

simulation.nodes(nodes).on("tick", ticked)
simulation.force("link").links(links)

下面簡(jiǎn)單解析一下代碼部分，const svg = d3.select("body").append("svg") 就是上面提到的d3操作dom的部分，就是類(lèi)似jQuery的插入操作， 總之我們獲取到了svg畫(huà)布， graph 是提供了數(shù)據(jù)關(guān)系模型，但是一般來(lái)講后端不會(huì)這么提供嚴(yán)格的對(duì)應(yīng)關(guān)系， 這時(shí)候就需要我們隊(duì)數(shù)據(jù)進(jìn)行處理以獲取合理的數(shù)據(jù)格式， 一般來(lái)講數(shù)據(jù)格式都是如上。

力導(dǎo)向圖的核心是forceSimulation, 如字面上的意思就是來(lái)模擬力的，這是d3的內(nèi)部算法我們基本干涉不了， 所以d3的力導(dǎo)向圖怎么動(dòng)最后停在哪都是我們沒(méi)法精確控制的， forceSimulation 定義了力導(dǎo)向圖的基本形態(tài)比如key值是否居中等等， 但是到這一步還沒(méi)對(duì)數(shù)據(jù)進(jìn)行任何處理。

const link 和 const node， 簡(jiǎn)單講就是把數(shù)據(jù)和dom進(jìn)行綁定插入對(duì)應(yīng)的dom節(jié)點(diǎn)， 一直到這一步， 我們完成了基本的步驟：根據(jù)關(guān)系模型繪制對(duì)應(yīng)節(jié)點(diǎn)， 由于不是canvas， 每個(gè)數(shù)據(jù)節(jié)點(diǎn)都有一個(gè)對(duì)應(yīng)的dom節(jié)點(diǎn)， 這里可以對(duì)樣式進(jìn)行精確的處理。

截止上面也并不是非得用d3不可，就是一些dom插入操作， 原生js也是可以實(shí)現(xiàn)的。 simulation.nodes(nodes).on("tick", ticked)跟simulation.force("link").links(links)才是d3真正的作用所在，它會(huì)修改原來(lái)的數(shù)據(jù)模型在上面掛載一些位置信息， 如圖所示：

可以看到，nodes和link上面分別多了不少數(shù)據(jù)，暫時(shí)我們不需要了解那么多， 只要知道x和y是節(jié)點(diǎn)的位置信息即可，另外力導(dǎo)向圖會(huì)不停的tick（300次左右），每次tick，d3都會(huì)修改graph上的位置信息，它內(nèi)部肯定做了很多事情， 比如碰撞檢測(cè)等等。當(dāng)每次tick觸發(fā)的時(shí)候我們都已調(diào)用一個(gè)callback，在這個(gè)callback里更新所有節(jié)點(diǎn)的位置信息，也就是上面代碼的ticked, 我們就是修改了node和link的位置信息也就是x1之類(lèi)的， 這些都是svg提供的接口這里不多做說(shuō)明了。 到這里， 一個(gè)完整的力導(dǎo)向圖算是完成了，雖然數(shù)據(jù)少了點(diǎn)但是并不妨礙我們?nèi)ダ斫馄渲械脑怼?/p> 總結(jié)

通過(guò)上面一個(gè)完整示例， 我們發(fā)現(xiàn)，d3的核心并不在于繪制圖形，這些都是dom操作，而是數(shù)據(jù)的處理，數(shù)據(jù)驅(qū)動(dòng)dom，到這里是不是跟現(xiàn)代mvvm又掛上鉤了，并且d3是基于dom的， 我們完全可以把d3當(dāng)做一個(gè)算法庫(kù)，處理數(shù)據(jù)，至于圖像的繪制完全可以交由react等框架，這是canvas類(lèi)庫(kù)所做不到的。用上virtual dom性能可能還會(huì)更高一點(diǎn)。dom操作是昂貴的，virtual dom跟d3搭配味道可能更佳。如果把d3作為一個(gè)算法庫(kù)我們還缺少最佳實(shí)踐。還需要學(xué)習(xí)。