大量d3js示例_如何使用d3js製作可視化圖表

1. D3.js 選擇

D3 可以選擇一些 HTML 或 SVG 元素並更改它們的樣式和/或屬性： d3.select 和 d3.selectAll 。

這兩個函數都將字元串作為其唯一參數。該字元串指定要選擇的元素，並採用 CSS 選擇器字元串的形式（例如 div.item ， #my-chart 或 g:first-child ）。

[//]: .classed 是一個 boolean.

除了將常量值傳遞給 .style , .attr , .classed , .property ,之外 .text ， .html 您還可以傳入一個函數。例如：

該函數接受兩個參數，通常命名為 d 和 i 。第一個參數 d 是 連接數據 （或「數據」）。 i 是選擇中元素的索引。

此方法有兩個參數：第一個是指定事件類型的字元串;第二個是觸發事件時調用的函數（「回調函數」）。此回調函數有兩個參數，通常命名為 e 和 d 。 e 是 DOM 事件對象並且 d 是連接數據。

最常見的事件包括（有關詳細信息，請參閱 MDN 事件參考）：

在事件回調函數中， this 變數綁定到觸發事件的 DOM 元素。這使我們能夠執行以下操作：

[//]:這 this 是一個 DOM 元素，而不是 D3 選擇，因此如果您想使用 D3 修改它，您必須首先使用 d3.select(this) .

.append 可以使用 D3和 .insert 方法將元素添加到選擇的元素中。可以使用刪除元素 .remove 。

.append 將一個元素附加到選擇中的每個元素。如果元素已經有子元素，則新元素將成為 最後一個子元素 。第一個參數指定元素的類型。

.insert 類似於 .append 但它允許我們指定第二個參數， 該參數指定（作為 CSS 選擇器）在哪個元素之前插入新元素 。

.remove 從頁面中 刪除選擇中的所有元素 。例如，給定一些圓圈，您可以使用以下方法刪除它們：

大多數選擇方法的返回值是選擇本身。這意味著諸如和之類的選擇方法 .style 可以 .attr 鏈接 .on 起來。例如：

該 .each 方法允許您為 選擇的每個元素 調用一個函數。

回調函數有兩個參數，通常命名為 d 和 i 。第一個參數 d 是 連接數據 。 i 是選擇中元素的索引。 this 關鍵字是指選擇中的當前 HTML 或 SVG 元素。

這是一個示例， .each 用於為每個選擇的元素調用函數。該函數計算索引是奇數還是偶數，並相應地修改圓：

該 .call 方法允許調用一個函數， 選擇本身 作為第一個參數傳遞給該函數。

.call 在您想要對選擇進行操作的可重用函數時很有用。

例如， colorAll 獲取一個選區並將選區元素的填充設置為橙色：

您可以使用 D3 的 .filter 方法過濾選擇。第一個參數是一個函數，它返回 true 是否應該包含元素。過濾的選擇由該 filter 方法返回，因此您可以繼續鏈接選擇方法。

在此示例中，您過濾偶數元素並將它們著色為橙色：

通過調用 .sort 和傳入比較器函數對選擇中的元素進行排序。比較器函數有兩個參數，通常是 a 和 b ，它們代表被比較的兩個元素的數據。如果比較器函數返回負數， a 將放在前面 b ，如果是正數， a 將放在後面 b 。

2. 如何使用d3.js製作可視化圖表

D3是目前最流行的JavaScript可視化圖表庫之一，D3的圖表類型非常豐富，並且支持SVG格式，因此應用十分廣泛，也有很多圖表插件基於D3開發，比如MetricsGraphics.js，在D3上構建的數據圖表非常強大。

D3的特點

允許綁定任意數據到DOM，將數據驅動轉換應用到Document中。

不僅可以創建精美的HTML表格，而且可以繪制折線圖、柱形圖和餅圖等數據圖表。

支持SVG，在Web頁面上渲染毫無壓力。

回到頂部

D3的使用方法

關於D3的具體用法，可以看D3圖形庫API參考這篇文章。本文主要對介紹一些經典圖表的實現效果及代碼。

<!DOCTYPEhtml>
<metacharset="utf-8">
<style>

svg{
font:10pxsans-serif;
}

.y.axispath{
display:none;
}

.y.axisline{
stroke:#fff;
stroke-opacity:.2;
shape-rendering:crispEdges;
}

.y.axis.zeroline{
stroke:#000;
stroke-opacity:1;
}

.title{
font:30078pxHelveticaNeue;
fill:#666;
}

.birthyear,
.age{
text-anchor:middle;
}

.birthyear{
fill:#fff;
}

rect{
fill-opacity:.6;
fill:#e377c2;
}

rect:first-child{
fill:#1f77b4;
}

</style>
<body>
<scriptsrc="http://d3js.org/d3.v3.min.js"></script>
<script>

varmargin={top:20,right:40,bottom:30,left:20},
width=960-margin.left-margin.right,
height=500-margin.top-margin.bottom,
barWidth=Math.floor(width/19)-1;

varx=d3.scale.linear()
.range([barWidth/2,width-barWidth/2]);

vary=d3.scale.linear()
.range([height,0]);

varyAxis=d3.svg.axis()
.scale(y)
.orient("right")
.tickSize(-width)
.tickFormat(function(d){returnMath.round(d/1e6)+"M";});

//AnSVGelementwithabottom-rightorigin.
varsvg=d3.select("body").append("svg")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");

//.
varbirthyears=svg.append("g")
.attr("class","birthyears");

//Alabelforthecurrentyear.
vartitle=svg.append("text")
.attr("class","title")
.attr("dy",".71em")
.text(2000);

d3.csv("population.csv",function(error,data){

//Convertstringstonumbers.
data.forEach(function(d){
d.people=+d.people;
d.year=+d.year;
d.age=+d.age;
});

//.
varage1=d3.max(data,function(d){returnd.age;}),
year0=d3.min(data,function(d){returnd.year;}),
year1=d3.max(data,function(d){returnd.year;}),
year=year1;

//Updatethescaledomains.
x.domain([year1-age1,year1]);
y.domain([0,d3.max(data,function(d){returnd.people;})]);

//[male,female].
data=d3.nest()
.key(function(d){returnd.year;})
.key(function(d){returnd.year-d.age;})
.rollup(function(v){returnv.map(function(d){returnd.people;});})
.map(data);

//.
svg.append("g")
.attr("class","yaxis")
.attr("transform","translate("+width+",0)")
.call(yAxis)
.selectAll("g")
.filter(function(value){return!value;})
.classed("zero",true);

//(sothatnoenterorexitisrequired).
varbirthyear=birthyears.selectAll(".birthyear")
.data(d3.range(year0-age1,year1+1,5))
.enter().append("g")
.attr("class","birthyear")
.attr("transform",function(birthyear){return"translate("+x(birthyear)+",0)";});

birthyear.selectAll("rect")
.data(function(birthyear){returndata[year][birthyear]||[0,0];})
.enter().append("rect")
.attr("x",-barWidth/2)
.attr("width",barWidth)
.attr("y",y)
.attr("height",function(value){returnheight-y(value);});

//Addlabelstoshowbirthyear.
birthyear.append("text")
.attr("y",height-4)
.text(function(birthyear){returnbirthyear;});

//Addlabelstoshowage(separate;notanimated).
svg.selectAll(".age")
.data(d3.range(0,age1+1,5))
.enter().append("text")
.attr("class","age")
.attr("x",function(age){returnx(year-age);})
.attr("y",height+4)
.attr("dy",".71em")
.text(function(age){returnage;});

//.
window.focus();
d3.select(window).on("keydown",function(){
switch(d3.event.keyCode){
case37:year=Math.max(year0,year-10);break;
case39:year=Math.min(year1,year+10);break;
}
update();
});

functionupdate(){
if(!(yearindata))return;
title.text(year);

birthyears.transition()
.ration(750)
.attr("transform","translate("+(x(year1)-x(year))+",0)");

birthyear.selectAll("rect")
.data(function(birthyear){returndata[year][birthyear]||[0,0];})
.transition()
.ration(750)
.attr("y",y)
.attr("height",function(value){returnheight-y(value);});
}
});

3. d3js的tree結構圖例怎麼做

如下過程：
使用d3.js
初始化d3和畫布大小，tree = d3.layout.cluster().size([h, w])
導入數據內，使用d3默認處理數據：容 root = tree.nodes(data)
處理數據（包括坐標的處理）
展示數據
思路是這樣的。

4. D3.js使用簡書

d3.js 是一個可以基於數據來操作文檔的 JavaScript 庫，可以幫你使用HTML CSS JS SVG Canvas 來展示數據，它結合強大的視圖組件來驅動Dom操作.
d3引入的使用

也可以單陸山獨使用某個模攜悉慎塊，比如單獨使用d3-selection

可以模塊化引入

Selections 允許強大的數據驅動文檔對象模型(DOM)：設置attributes,styles,HTML 或 text 內容，選擇集的方法通常選擇當前的選擇當前的選擇集或者新的選擇集，因此允許進行鏈式調用。

等價於：

選中符合條件的第一個元素，選擇條件為 selector 字元串。如果沒有元素被選中則返回空選擇集，如果選擇器有多個，那就返回匹配第一辯敬個選擇集

選擇所有與制定的selector匹配的元素，返回一個數組。如果沒有元素被選中，則返回的空的選擇集。

視圖移動以及縮放是一種流行的交互技術縮放行為通過 d3-zoom 模塊來實現，縮放本身與DOM元素無關，可以用於SVG，HTML 或者 Canvas。

創建一個新的縮放行為,並返回該行為。zoom既是一個對象又是一個函數，通過selection.call()來應用到元素本身上

事件綁定 .zoom 雙擊禁用縮放以及禁止滾動齒輪縮放

5. 初識 D3.js ：打造專屬可視化

隨著現在自定義可視化的需求日益增長，Highcharts、echarts等高度封裝的可視化框架已經無法滿足用戶各種強定製性的可視化需求了，這個時候D3的無限定製的能力就脫穎而出。

如果想要通過D3完成可視化，除了對於D3本身API的學習, 關於web標準的HTML, SVG, CSS, Javascript 和數據可視化的概念以及標准都是需要學習的。這無疑帶來了較高的學習門檻，但這也是值得的，因為掌握 D3 後，我們幾乎可以實現任何 2d 的可視化需求。

本文通過對D3核心模塊分析以及進行具體案例實踐的方式，來幫助初學者學習了解D3的繪圖思路。

D3的全稱是 Data-Driven Documents（數據驅動文檔），是基於數據來操作文檔的 JavaScript 庫，其核心在於使用繪圖指令對數據進行轉換，在源數據的基礎上創建新的可繪制數據，生成SVG路徑以及通過數據和方法在DOM中創建數據可視化元素（如軸）。

相對於Echats等開箱即用的可視化框架來說，D3更接近底層，它可以直接控制原生的SVG元素，並且不直接提供任何一種現成的可視化圖表，所有的圖表都需我們在它的庫里挑選合適的方法構建而成，這也大大提高了它的可視化定製能力。而且D3 沒有引入新的圖形元素，它遵循了web標准（HTML, CSS, SVG 以及 Canvas ）來展示數據，所以它可以不需要依賴其他框架獨立運行在現代瀏覽器中。

在V4版本後，D3的 API 現在已經被拆分成一個個模塊，我們可以根據自己的可視化需求進行按需載入。根據泛義可以將D3 API模塊分為以下的幾大類： DOM操作、數據處理，數據分析轉換、地理路徑，行為等 。

這里我們主要對 D3-selection 和 D3-scale 模塊進行解析：

D3-selection （選擇集）是 D3js的核心模塊，主要是用來進行選擇元素，設置屬性、數據綁定，事件綁定等操作。

選擇元素： D3-selection 提供了兩種方法來獲取目標元素，d3.select()：返回目標元素的第一個節點，d3.selectAll()：返回目標元素的集合，乍一看有點類似原生API 的 querySelector 和 querySelectorAll，但是 d3.select 返回的是一個 selection 對象，querySelector 返回的是一個 NodeList 數組。通過控制台列印的信息，可以看到 selection 下的 groups 存放了所有選擇的元素集合，parents 存放了所有選中元素的父節點。

設置屬性或者綁定事件： 我們不需要關心 groups 的結構是怎麼樣的。當調用 selection.attr 或者 selection.style 的時候, selection 中的所有 group 的所有子元素都會被調用，group 存在的唯一影響是: 當我們傳參是一個function 的時候，例如 selection.attr('attrName', function(data, i)) 或 selection.on('click', function(data, i)) 時，傳遞的 function(data, i) 中, 第二個參數 i 是元素在 group 中的索引而不是在整個 selection 中的索引。

數據綁定： 實際上是給選擇的DOM元素的 __data__ 屬性賦值，這里提供了3種方式進行數據綁定：

（1）給每一個單獨的 DOM 元素調用 selection.datum：d3.select('body').datum(20) 等價於 document.body.__data__ = 20

（2）從父節點中繼承來數據, 比如: append , insert , select，子節點會主動繼承父節點的數據：

（3）調用 selection.data() 方法，支持傳入裝有基礎數據類型的數據，也支持傳入一個function(parentNode, groupIndex)根據節點索引與數據做映射，data()方法引入了 d3 中非常重要的 join 思想:

綁定 data 到 DOM 元素，在D3中是通過比較 data 和 DOM 的 key 值來找到對應關系的。如果我們沒有單獨設置 key 值，那麼默認根據 data 的下標索引來設定，但是當數據順序發生改變，這個默認下標 key 值就變得不可靠了，這時我們可以使用 selection.data(data, keyFunction) 中的第二個參數 keyFunction，根據當前的數據返回一個對應的 key 值。通過下面的圖例可以看出，不管是有一個還是多個 group（每個group 都是獨立的），只要我們保證在任意一個 group 中的 key 值是唯一的，數據一旦發生變化都會反映給對應的 DOM 元素（ update 的過程）：

上面提到的都是data數據和DOM元素數量相同的情況下的數據綁定，那如果data數據和DOM元素數量不相同時，我們來看看 D3 又是如何進行數據綁定的：現在終於可以來介紹 D3-selecion 模塊的核心 Join 思想了，這個思想簡單來說就是「不應該告訴D3去怎麼創建元素, 而是告訴D3，.selectAll() 得到的 selecion 集合應該和 .data(data) 綁定的數據要怎麼一一對應」。

從上圖可以看出，在進行 d3.data(data) 數據綁定的時候，會產生三種狀態的選擇集：

用 Join 的方式來理解意味著，我們要做的事情僅僅是聲明 DOM集合和數據集合之間的關系, 並且通過處理三個不同狀態的集合 enter、update 、 exit 來描述這種關系。這種方式可以大大簡化我們對DOM元素的操作，我們不需要再用 if 和 for 循環的方式來進行復雜的邏輯判斷，來得到我們需要得到的元素集合。並且在處理動態數據的時候，可以通過處理這三種狀態，輕松的展示實時數據和添加平滑的動態交互效果。

D3-scale （比列尺）提供多種不同類型的比例尺。經常和 D3-axis 坐標軸模塊一起使用。

D3-scale 提供了多種連續性和非連續性的比例尺，總體可以將他們分為三大類：

常用的一些比例尺：

（1）d3-scaleLinear 線性比例尺(連續性輸入和連續性輸出)

可以看出，調用d3.scaleLinear()可以生成線性比例尺，domain()是輸入域，range()是輸出域，相當於將domain中的數據集映射到range的數據集中。

使用示例：

映射關系：

（2）d3-scaleTime 時間比例尺(連續性輸入和連續性輸出)

時間比例尺與線性比例尺類似，只不過輸入域變成了一個時間軸。正常我們使用比例尺都是個正序的過程，但是D3也提供了invert()以及invertExtent()方法，我們可以通過輸出域中的具體值得出對應輸入域的值。

使用示例：

（3）d3.scaleQuantize 量化比例尺(連續性輸入和離散性輸出)

量化比例尺是將連續的輸入域根據輸出域被分割為均勻的片段，所以它的輸出域是離散的。

使用示例：

映射關系：

（4）d3. scaleThreshold 閾值比例尺(連續性輸入和離散性輸出)

閾值比例尺可以為一組連續數據指定分割閾值，閾值比例尺默認的 domain：[0.5] 以及默認的 range：[0, 1] ，因此默認的 d3.scaleThreshold() 等價於 Math.round 函數。閾值比例尺輸入域為 N 的話，輸出域必須為 N + 1，否則比例尺對某些值可能會返回 undefined，或者輸出域多餘的值會被忽略。

使用示例：

存在三種映射關系：

a. 當domain和range的數據是 N : N+1

b. 當domain和range的數據是 N : N + 大於1

c. 當domain和range的數據是 N + 大於0 : N

（5）d3.scaleOrdinal 序數比例尺(離散性輸入和離散性輸出)

與scaleLinear等連續性比例尺不同，序數比例尺的輸出域和輸入域都是離散的。

使用示例：

存在三種映射關系：

a.當domain和range的數據是一一對應

b.當domain少於range的數據

c.當domain多於range的數據

通過以上的學習，應該對d3是如何操作DOM以及坐標軸的數據映射為相應的可視化表現有了一定的了解，下面我們來實際運用這兩個模塊，來實現我們常見的可視化圖表：柱狀圖。

（1）首先添加一個SVG元素。

（2）根據我們上面說到 d3.scale 模塊以及 d3.axis 模塊繪制坐標軸，d3.scaleBand() 叫做序數分段比例尺，類似我們說的 d3.scaleOrdinal() 序數比例尺，但是它支持連續的數值類型的輸出域，離散的輸入域可以將連續的范圍劃分為均勻的分段。這里再講一個細節，在繪制網格的時候，我們並沒有額外添加 line 元素來實現，而是通過 d3.axis 坐標軸模塊的 axis.ticks() 方法對坐標軸刻度進行了設置，通過 tickSIze() 設置了刻度線長度，來模擬和圖表寬度相等的網格線，並且還可以通過 tickFormat() 對Y軸刻度值進行格式化轉換。

（3）坐標軸繪制好了後，我們通過數據綁定來繪制與之對應的矩形(rect)元素了。

（4）這個時候柱狀圖已經基本繪制好了，我們再豐富內容展示，添加標簽、標題等提示信息。

（5）最後我們通過給柱子綁定監聽事件，實現tooltips的信息浮層交互。

通過對 d3.selection 、d3.scale 以及 d3.axis等模塊的學習，我們已經可以繪制出常用的柱狀圖等圖表，我們也可以通過d3提供的其他模塊繪制出更加復雜的可視化效果，例如通過 d3-hierarchy(層級模塊) 實現層級樹圖可視化，d3-geo(地理投影) 實現地圖數據可視化等，本文講解的內容還只是D3庫的冰山一角。所以等我們掌握了D3後，限制我們實現可視化的不再是技術而是想像力。

導航:首頁 > 編程語言 > 大量d3js示例

大量d3js示例

與大量d3js示例相關的資料

友情鏈接