前言

d3.js 是一款上手容易的js類庫,專門用于繪制svg圖形圖表,其關鍵理念為data-join 意即數據綁定.搞清這個概念非常重要,它將以簡潔優雅的形式體現數據驅動編程.

以下是Thinking with Joins的拙譯 ,原作者Mike Bostock

假設你要用D3畫一副散點圖,因此需要生成一些 SVG circle 元素來直觀地展現數據. 你會驚訝地發現D3沒有提供原生的產生多個DOM元素的接口,

是的,只有一個 append 方法,用于產生單個DOM元素:

svg.append("circle")  .attr("cx", d.x)  .attr("cy", d.y)  .attr("r", 2.5); 

但那只是單個圓,而你想要更多: 最好data*中每個元素對應一個圓. 在你用蠻力寫循環把圓畫出來之前,讓我們看看D3中的一個例子:

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); 

*此處 data是一個 JSON 數組,其每個元素 由 x 和 y屬性構成, 例如: [{"x": 1.0, "y":1.1},{"x": 2.0, "y":2.5}, …]. 另,SVG circle元素用cx,cy表達圓心坐標,r表達半徑長度.

這份代碼符合你的需求,即每個元素產生一個圓 , 通過x和y屬性表達圓心的坐標.

但selectAll("circle")是什么意思,為什么要在產生所有圓之前去選中根本不存在的元素呢?

原來事情是這樣的:告訴D3你的目標,而不要告訴它具體怎么做. 在這個例子中,D3知道我們的意圖是,要讓選中的"circle"元素來響應數據的變化, selectAll即描述了這個目標；而無需一步步指揮D3產生多個圓.這個概念即data-join.

data-join的背后執行了以下步驟:

為什么要這么麻煩呢? 為什么不直接提供原生接口? data-join的優雅之處在于抽象和解耦.上述代碼在enter()里只是專心處理新增的元素,而update and exit分別專注于處理更新和待刪除部分.這意味著你不用把所有DOM元素刪了重繪,因此得以輕松應對實時變化的數據,甚至支持一些交互(如拖動)與漸變的效果!

這里是一個處理三種狀態(增改刪)的例子:

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