【譯】D3入門

時間 2019-11-17

標籤 d3 入門简体版

原文原文鏈接

原文標題：【Getting Started with D3】

原文連接：thinkingonthinking.com/Getting-Sta…

譯註：本文使用D3的v3版本，當前最新版本v5html

可視化是理解想法和玩轉數據的好工具。來自 Ideo 的 Tim Brown 在這篇文章中寫道node

視覺思惟不只限於插圖。它能夠採起多種形式。思惟導圖、二乘二矩陣和其餘視覺框架能夠幫助以有價值的方式探索和描述想法，這些想法只須要幾條直線和一些想象力。git

特別是對於圖形中的數據可視化，D3 可能會有所幫助。D3 表明「數據驅動文檔」，是 HTML 和 SVG 的JavaScript可視化庫。這篇文章是一個簡短的概述，能夠幫助您入門。github

加載 D3

加載 D3 的最簡單方法是從CDN加載腳本，例如：ajax

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
複製代碼

或者，您能夠從 github倉庫或項目網站複製庫。算法

重要說明：經過添加帶有對 D3.js 庫的引用的腳本標記，能夠得到要使用的 "d3" 對象。有了這個，您就擁有了一個在瀏覽器中呈現數據的工具。瀏覽器

d3 對象

d3對象有點相似於 jQuery 中的 「$」 對象。例如，您能夠 「select」 相似 circle 標籤這樣的DOM節點。也可使用 「append」 構建新節點。app

d3對象還能夠幫助您設置用於渲染圖形的畫布。你須要一個基於 「svg」 的畫布。添加此 「svg」 是構建圖形的第一步。所以，讓咱們定義如下構造：框架

var vis = d3.select("#graph")
            .append("svg");
複製代碼

這將選擇ID爲 「#graph」 的DOM節點。而後，您可使用如下方法添加圖表的寬度和高度等屬性：編輯器

var w = 900,
    h = 400;
vis.attr("width", w)
   .attr("height", h);
複製代碼

你還能夠添加文字

vis.text("The Graph")
複製代碼

若是你在 jQuery 中使用選擇器，那麼選擇和添加DOM節點應該看起來很熟悉。

放置節點

可是，D3 與 jQuery 不一樣，由於它容許根據 「數據」 「佈局」 圖形結構。這意味着，選擇的DOM節點提供了許多不一樣的功能，而不是 jQuery 的相同選擇。

一旦選擇了DOM節點，就能夠將數據 「鏈接」 到DOM節點！這是經過 data() 命令完成的。數據到節點的映射可能會感受有點神奇，由於這會基於聲明性語法添加關係。若是你最終有些困惑（就像我同樣），你能夠在這裏閱讀一些額外的解釋

要進行第一次映射，咱們首先定義節點：

var nodes = [{x: 30, y: 50},
             {x: 50, y: 80},
             {x: 90, y: 120}]
複製代碼

由於咱們從一個新的畫布開始，全部節點都是新的，咱們能夠用 「selectAll」 - 「data」 - 「enter」 來映射它們：

vis.selectAll("circle .nodes")
   .data(nodes)
   .enter()
   .append("svg:circle")
   .attr("class", "nodes")
   .attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; })
複製代碼

順序是這樣的：您選擇一組DOM節點（可能存在或不存在）。而後，您將這些節點與數據鏈接起來，對於每一個新的DOM節點，您能夠指定標記名稱（circle）並添加一個類和更多屬性。

要實際查看圓圈，您必須設置 fill 屬性：

vis.selectAll("circle .nodes")
   .data(nodes)
   .enter()
   .append("svg:circle")
   .attr("class", "nodes")
   .attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; })
   .attr("r", "10px")
   .attr("fill", "black") 
複製代碼

這個結果應該相似於：

因爲圓圈已繪製好了，您如今能夠添加和刪除數據，圖表將自動更新：嘗試此codepen

鏈接點

圖表基於節點和連接。要渲染這些連接，您須要在圓圈之間添加線條。因爲您具備圓的座標，所以能夠按以下方式添加行：

var links = [
  {source: nodes[0], target: nodes[1]},
  {source: nodes[2], target: nodes[1]}
]
複製代碼

您可使用線條 SVG 形狀來鏈接點：

vis.selectAll(".line")
   .data(links)
   .enter()
   .append("line")
   .attr("class", "line")
   .attr("x1", function(d) { return d.source.x })
   .attr("y1", function(d) { return d.source.y })
   .attr("x2", function(d) { return d.target.x })
   .attr("y2", function(d) { return d.target.y })
   .style("stroke", "rgb(6,120,155)");
複製代碼