如何使用 D3.js 將圖表添加到您的 WordPress 網站

您可能熟悉“數據可視化”這個術語，因為它作為一種實踐和職業道路已經變得更加主流。 這個新興領域進展順利是有原因的——重要的是我們不斷地了解我們的用戶，並向他們展示數據以支持我們的主張。

當數據以乾淨和專業的方式呈現時，它很容易理解和解釋。 在大多數情況下，您的用戶都是視覺化的人，那麼有什麼比圖表更好的方式來說明數據呢？ D3.js，也稱為數據驅動文檔，是向 WordPress 站點添加圖表的好方法。

為什麼是 D3？

這個庫幫助設計師在網絡上展示數據。 可能性是無窮無盡的，這使它成為一個非常受歡迎的圖書館。 從簡單到復雜再到介於兩者之間的任何東西，D3 都可以自定義以呈現幾乎任何類型的圖表。 它與標準的 Web 技術配合得很好，可以操作 DOM，超級靈活，並且可以完全按照您的喜好自定義圖表。

到目前為止，您很可能已經遇到過可縮放矢量圖形，通常稱為 SVG。 這是 D3 庫創建的格式類型。 SVG 很棒，因為它們體積小、可擴展且獨立於分辨率。

需要明確的是，此解決方案不附帶任何開箱即用的預構建圖表 - 您必須自己想出！ 看看 D3 畫廊，你會看到很多很好的例子來激發你的靈感。

作為開源解決方案，您不必擔心許可和成本。 因為它是開源的，所以開發正在進行中。 為了及時了解最新版本，您可以在 Github 上 fork D3。

製作簡單的 D3 圖表

現在我們知道 D3 有多棒了，讓我們構建一些東西。 我們將製作一個簡單的圓環圖，它將涵蓋 D3 的基本概念。

第一步：將腳本添加到您的站點

首先，您需要將 D3 腳本添加到您的 WordPress 站點。 d3 網站提供下載，或者您可以直接鏈接到最新版本。 您會注意到我在本教程中使用的是縮小版。 D3 的大小自然非常小，但縮小版仍然略小，僅為 148 KB。

接下來，您將在自定義圖表腳本所在的位置創建一個新的 JavaScript 文件。 為文件起一個可識別的名稱，以便於查找。

在特定於圖表的 JavaScript 之前調用 D3 腳本非常重要。 如果事情沒有按正確的順序調用，圖表將不會呈現。 （我從個人經驗中知道這一點，如果您不立即抓住它，您可能會花費大量時間嘗試修復未損壞的東西。）

這些腳本應添加到您的網站結束正文標記之後。 檢查頁面時，確保它看起來像這樣：

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

請記住，您的文件路徑可能與此不同，具體取決於您的文件結構。

第二步：添加腳本來創建圖表

您根本不會接觸d3.js文件，只在您的特定圖表文件中工作。 在這種情況下，它被稱為charts.js 。

讓我們一塊一塊地分解。 首先，創建變量並確定函數中需要的內容。 我將這個變量命名為donut 。

var donut = (function(one) {
})();

在花括號內，您將添加您的尺寸信息。

var width = 400,

height = 400,

radius = 200

接下來，定義你的顏色。 灰色和藍色圖表怎麼樣？ 此處列出的第一種顏色是淺灰色，這將是默認顏色。 第二個是代表數據的藍色。

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

您將需要一些數據來測試它，所以讓我們接下來添加它。 對於本教程，數據是硬編碼的，但您也可以將電子表格數據和動態數據與 D3 一起使用。

var piedata = [{

value: 50

}, {

value: 30

}, ]

現在您可以添加更多細節來幫助定義圖表的呈現方式。

圓弧定義內半徑。 想像圖表的外半徑——你會希望它相當厚，所以減去 100 就足夠了。

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

這將創建 SVG 容器，而#donut是您將在頁面上定位以實際呈現圖表的對象。 這是您將從上述步驟開始看到您的顏色的地方。

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

完成的代碼

以防萬一您想將您所擁有的內容與示例進行比較，這裡是完整的代碼片段。

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

看圖表

您將需要創建一個新頁面或帖子，以便您可以“調用”圓環圖以實際查看它。 確保您處於文本編輯模式。

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Viewbox 和縱橫比尺寸圖表

SVG 標籤中有一些額外的東西，即viewBox和preserveAspectRatio 。 這不是由 D3 生成的，完全是可選的。 您可能有另一種首選的調整大小的方法，但這往往效果很好，並且有助於圖表的響應能力。

特別是在這種情況下，由於我們想要保持完美的圓形，設置縱橫比將確保 SVG 縮放以適應。 這就是viewBox發揮作用的地方。 viewBox的優點是它定義了 SVG 內部使用的所有測量值和坐標應如何縮放以適應可用空間。 如果您還使用 400 作為測量值，這裡有一個關於如何保持圓形形狀的快速說明。

我們有兩個相同的 400 值； 這樣做的原因是圖像可以正確縮放。 使用我們的viewBox="0 0 400 400" ，我們正在為圖形創建一個坐標系。 它寬400個單位，高400個單位。 SVG 圖形的寬度和高度確定了可見區域，設置viewBox允許您指定圖形可以拉伸以適應某個容器（很可能是默認情況下的視口，這是用戶可以目前見）。

還有一點，因為即使定義了viewBox ，它仍然不能完美地縮放。 它不會被扭曲，這是一件好事，但等式還有更多。 遇見僚機， preserveAspectRatio 。 除非有定義圖像縱橫比的viewBox ，否則它沒有任何效果。 將調整比例以保持縱橫比，因此您可以保持完美的圓形圖表。 當包含preserveAspectRatio時，您計劃當viewBox與圖表所在的視口或容器的縱橫比不匹配時的實例。在大多數情況下，默認情況下，圖像將縮放直到它同時適合高度和寬度，但在任何額外的空間內居中。 我們已經包含preserveAspectRatio="xMidYMid" ，它告訴瀏覽器將圖形在視口中的兩個方向居中。

最重要的一點是知道圖形不會被截斷並且是可擴展的。 真正理解這一點的關鍵是嘗試這些值。 這樣做的一個好方法是查看值更改時會發生什麼以及它與視口的關係。

瀏覽器支持和 d3

您可能使用的是現代瀏覽器，但如果您必須支持舊瀏覽器，則值得一提。 總體而言，瀏覽器支持很好，您可能不會遇到任何問題，但 D3.js 不能很好地與 IE8 等舊瀏覽器配合使用。

創建一個簡單的圖表是使用 D3.js 啟動和運行的好方法。 在您設計數據並轉向更多圖表類型時，了解基礎知識並熟悉 D3 入門圖表將對您非常有幫助。 從簡單到復雜，設計選擇是無限的。

你的圖表結果如何？ 讓我們在評論中知道！

下一步是什麼？

下載此電子書以獲取我們最推薦給開發人員的插件列表！ 我們發現所有這些插件都易於使用，不會對您的網站造成太大影響，而且非常可靠。

準備好安裝您最喜歡的新插件了嗎？ 點擊下方！