D3的簡單語法

2022-06-09 12:21:08 字數 2315 閱讀 6149

選擇

選擇單個元素用 select:選擇第乙個元素

選擇多個元素用 selectall:

選擇、插入、刪除元素

insert():在選擇集前面插入元素

d3.select("body").insert("p", "#moon")

remove():刪除元素

d3.select("#moon").remove()

文字屬性樣式操作

資料連線

資料連線提供以下四種方法來處理資料集:

d3.select("#list").selectall("li")

.data([10, 20, 30, 25, 15])

.text(function(d) );

enter():對剩餘資料的訪問(未對映到現有元素),從相應資料建立新元素,為剩餘的資料項建立元素。

d3.select("#list").selectall("li")

.data([10, 20, 30, 25, 15])

.text(function(d) )

.enter()

.text(function(d)

);

3. li - 30

4. li - 25

5. li - 15

exit():處理從資料集中動態刪除的資料項

d3.selectall("li")

.data([10, 20, 30, 15])

.exit()

.remove()

data function :

使用d3建立使用svg

step 1:建立乙個容器來儲存svg影象

var width = 300;

var height = 300;

var svg = d3.select("#svgcontainer")

step 3:在svg元素中繪圖

.attr("x1", 100)

.attr("y1", 100)

.attr("x2", 200)

.attr("y2", 200)

.style("stroke", "rgb(255,0,0)")

.style("stroke-width", 2);

svg 中常用圖形屬性

圓形

橢圓

使用d3.js進行轉換

step 1: 建立乙個容器來儲存svg影象,如下所述。

step 2: 建立svg影象,如下所述。

var width = 300;

var height = 300;

var svg = d3.select("#svgcontainer")

.attr("width", width)

.attr("height", height);

step 3: 建立svg組元素並設定translate和rotate屬性。

step 4:建立乙個svg矩形並將其附加到組內。

var rect = group

.attr("x", 20)

.attr("y", 20)

.attr("width", 60)

.attr("height", 30)

.attr("fill", "green")

step 5:建立乙個svg圈並將其附加到組內。

var circle = group

.attr("cx", 0)

.attr("cy", 0)

.attr("r", 30)

.attr("fill", "red")

D3能做什麼

d3.js是乙個js庫,用於建立資料視覺化圖形,但這麼說來還是小看它了。d3是個很不錯的軟體,它能幫你生成和操作帶資料的文件!為此,要 把資料載入到瀏覽器的記憶體空間 把資料繫結到文件中的元素,根據需要建立新元素 解析每個元素的範圍資料 bound datum 並為其設定相應視覺化屬性,實現元素的變...

D3 函式和模組

1.什麼是函式 a.函式是完成一定功能的程式段的封裝,使用者無需理解函式是如何實現,只需了解函式的使用方法 2.什麼是模組 包 庫 a.模組是由多個函式和多個變數,物理上,模組對應py檔案 b.包是多個模組的集合,物理上對應包含多個py檔案的資料夾 c.庫是多個包的集合,物理上對應包含多個包的資料夾...

裝置 D3 狀態筆記

以上都是亂寫的,等讀懂了再來編輯 裝置 d3 狀態包括 d3hot 和 d3cold 摘自微軟 在 d3 hot 狀態時,device 的供電大部分都已經斷掉了,其上一層 bus 仍然會給其極少的電流來進行控制。此時的 device 也能夠從邊帶電源中吸取電流,這取決於裝置的結構。此時計算機可以繼續...