d3入門篇（一）：基礎知識

xuweijian 發布于2019-08-23 13:59 / 1235人閱讀

摘要：安裝就是一個的庫，不需要安裝，可下載文件或直接引用網絡鏈接。示例選擇集，與原生中的用法類似，返回匹配的第一項，返回匹配的所有項。

安裝

d3.js就是一個js的庫，不需要安裝，可下載文件或直接引用網絡鏈接。

示例

first p

second p

third p

選擇集

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

選第一個元素

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

選指定的某個元素

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

鏈式調用

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

改變樣式與綁定數據

datum()

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

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

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:綁定的數據值
i:選擇集元素的索引值從0開始

增刪元素

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

云服務器 GPU云服務器入門篇基礎篇之基礎篇 ASPNET入門數據篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99908.html

d3入門篇（三）：比例尺坐標軸

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

tomato 2019-08-23 14:03 評論0 收藏0
d3入門篇（四）：繪制完整柱狀圖添加過渡效果

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

Jason 2019-08-23 14:08 評論0 收藏0
前端綜合性文檔和教程總結（持續更新）

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

piglei 2019-08-20 10:19 評論0 收藏0
d3入門篇（二）：繪制基本的柱形圖

摘要：簡單理解后的元素需要繼續進行可視化的工作。當選擇集中的元素個數大于數據集中的元素個數，通過處理之后返回多出來那部分數據的元素選擇器這時候接著執行那就是在上了。簡單理解后返回的是一個選擇集，即多出來的那部分元素。 d3簡單理解就是通過在svg畫布上繪制基本圖形，本文將介紹d3繪制基本的柱形圖繪制畫布 import * as d3 from d3; var width=300;//svg...

張率功 2019-08-23 14:00 評論0 收藏0
web入門+書籍推薦

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

suosuopuo 2019-08-19 18:37 評論0 收藏0