d3入門(mén)篇（一）：基礎(chǔ)知識(shí)

xuweijian 發(fā)布于2019-08-23 13:59 / 1261人閱讀

摘要：安裝就是一個(gè)的庫(kù)，不需要安裝，可下載文件或直接引用網(wǎng)絡(luò)鏈接。示例選擇集，與原生中的用法類(lèi)似，返回匹配的第一項(xiàng)，返回匹配的所有項(xiàng)。

安裝

d3.js就是一個(gè)js的庫(kù)，不需要安裝，可下載文件或直接引用網(wǎng)絡(luò)鏈接。

示例

first p

second p

third p

選擇集

select()，selectAll() 與原生js中的querySelector querySelectorAll用法類(lèi)似，select返回匹配的第一項(xiàng)，selectAll返回匹配的所有項(xiàng)。

選第一個(gè)元素

d3.select("body").select("p")

選指定的某個(gè)元素

d3.select("body").select(".secondElement") //class加. id加#

鏈?zhǔn)秸{(diào)用

var newP = d3.select("body").selectAll("p").text("在這里改變body內(nèi)所有p標(biāo)簽的內(nèi)容")；

改變樣式與綁定數(shù)據(jù)

datum()

var p =d3.select("body").selectAll("p");

var str="123456";
p.datum(str);//綁定數(shù)據(jù)
p.text(function(d,i){
    return `第${i}個(gè)元素綁定的數(shù)據(jù)是$qoyqs8suu2u`;
})

data()

var p =d3.select("body").selectAll("p");
var arr=[1,2,3];
p.data(arr);
p.text(function(d,i){
return d;
})

function(d,i)

d:綁定的數(shù)據(jù)值
i:選擇集元素的索引值從0開(kāi)始

增刪元素

append()//在選擇集的末尾添加元素

d3.select("body").append("p").text("this is new append element")

insert(name,[before])//在指定元素之前添加元素

d3.select("body").insert("p", ".secondElement").text("this is new insert element");

remove()

var newElement=d3.select("body").insert("p", ".secondElement").text("this is new insert element");
newElement.remove();

云服務(wù)器 GPU云服務(wù)器入門(mén)篇基礎(chǔ)篇之基礎(chǔ)篇 ASPNET入門(mén)數(shù)據(jù)篇

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99908.html

相關(guān)文章

d3入門(mén)篇（三）：比例尺坐標(biāo)軸

摘要：為了根據(jù)顯示刻度靈活變化寬高，而不是定死，特別是數(shù)據(jù)差異性很大的時(shí)候，我們希望圖表顯示范圍都在畫(huà)布里面，這時(shí)就會(huì)引入比例尺的概念來(lái)進(jìn)行縮放。根據(jù)這些規(guī)則，會(huì)為我們返回一個(gè)比例尺函數(shù)。這篇文章繼續(xù)介紹d3的基礎(chǔ)知識(shí) 比例尺在繪制柱狀圖時(shí)，我們往往會(huì)定義很大的畫(huà)布，然而我們要可視化的數(shù)據(jù)確很小，這時(shí)會(huì)出現(xiàn)很多留白的情況。為了根據(jù)顯示刻度靈活變化寬高，而不是定死，特別是數(shù)據(jù)差異性很大的...

tomato 2019-08-23 14:03 評(píng)論0 收藏0
d3入門(mén)篇（四）：繪制完整柱狀圖添加過(guò)渡效果

摘要：這篇學(xué)習(xí)筆記是入門(mén)篇的最后一部分，將前幾篇的內(nèi)容整合到一起，繪制帶過(guò)渡效果的柱狀圖，這次先給大家看一下結(jié)果圖。這篇學(xué)習(xí)筆記是入門(mén)篇的最后一部分，將前幾篇的內(nèi)容整合到一起，繪制帶過(guò)渡效果的柱狀圖，這次先給大家看一下結(jié)果圖。結(jié)果 showImg(https://segmentfault.com/img/bVblfGG?w=1230&h=1210); 前言先放結(jié)果圖是想反饋一下在整合基...

Jason 2019-08-23 14:08 評(píng)論0 收藏0
前端綜合性文檔和教程總結(jié)（持續(xù)更新）

摘要：小弟在前端摸爬滾打一段時(shí)間，發(fā)現(xiàn)前端的比較好的文檔比較分散，特別是中文的，我平時(shí)都是收藏在瀏覽器里，以后有好的教程和綜合性的文檔我會(huì)更新到這里。小組中文文檔，很全。小弟在前端摸爬滾打一段時(shí)間，發(fā)現(xiàn)前端的比較好的文檔比較分散，特別是中文的，我平時(shí)都是ctrl+D收藏在瀏覽器里，以后有好的教程和綜合性的文檔我會(huì)更新到這里。一則可以做個(gè)記錄，防止丟失。二則有需要的朋友可以來(lái)我這里找一找。 ...

piglei 2019-08-20 10:19 評(píng)論0 收藏0
d3入門(mén)篇（二）：繪制基本的柱形圖

摘要：簡(jiǎn)單理解后的元素需要繼續(xù)進(jìn)行可視化的工作。當(dāng)選擇集中的元素個(gè)數(shù)大于數(shù)據(jù)集中的元素個(gè)數(shù)，通過(guò)處理之后返回多出來(lái)那部分?jǐn)?shù)據(jù)的元素選擇器這時(shí)候接著執(zhí)行那就是在上了。簡(jiǎn)單理解后返回的是一個(gè)選擇集，即多出來(lái)的那部分元素。 d3簡(jiǎn)單理解就是通過(guò)在svg畫(huà)布上繪制基本圖形，本文將介紹d3繪制基本的柱形圖繪制畫(huà)布 import * as d3 from d3; var width=300;//svg...

張率功 2019-08-23 14:00 評(píng)論0 收藏0
web入門(mén)+書(shū)籍推薦

摘要：這里我也給大家推薦一些數(shù)據(jù)可視化的圖形庫(kù)不過(guò)這些圖形庫(kù)一般需要一些的基礎(chǔ)知識(shí)輸入數(shù)據(jù)即可生成圖形，自由發(fā)揮程度較低百度出品，與很像，個(gè)人覺(jué)得略丑推薦，但不適合新手，圖表漂亮，靈活性高以上都可以先去閱讀官方文檔未完待續(xù) 如果你想建立一個(gè)自己的網(wǎng)站，你可以從網(wǎng)上搜到許多的教程：比如 wordpress gitpages 等等。如果你想了解這個(gè)框架是怎么工作的，你可以了解以下下面的三個(gè)...

suosuopuo 2019-08-19 18:37 評(píng)論0 收藏0