安裝
npm install d3 --save-dev
應(yīng)用
import * as d3 from "d3";
引用過后那么開始我的一個d3的例子
<template>
<div>
<p>1111</p>
<p>2222</p>
<p>3333</p>
</div>
</template>
<script>
import * as d3 from "d3";
export default {
mounted() {
this.first();
},
methods: {
first() {
let p = d3.select("body").selectAll("p").text("hello");
p.style("color", "#f03")
.style("font-size", "30px");
},
},
};
</script>
效果圖：
1565663757075.jpg
這里我們可以看到p里面的內(nèi)容全部被重寫了。那么下來就介紹兩個上面例子用到的選擇器：
選擇元素
* [d3.selection]- 選擇根文檔元素。
* [d3.select] - 從文檔中選擇一個元素。
* [d3.selectAll] - 從文檔中選擇多個元素。
* [*selection*.select] - 選擇每個選中元素的一個后代元素。
* [*selection*.selectAll] - 選擇每個選中元素的多個后代元素。
* [*selection*.filter]- 基于數(shù)據(jù)過濾元素。
* [*selection*.merge] - 合并兩個選擇。
* [d3.matcher] - 測試一個元素是否匹配選擇器。
* [d3.selector]- 選擇一個元素。
* [d3.selectorAll] - 選擇多個元素。
* [d3.window] - 得到節(jié)點的所有者窗口。
修改數(shù)據(jù)
* [*selection*.attr]- 設(shè)置或獲取特性。
* [*selection*.classed]- 獲取，添加或移除CSS類。
* [*selection*.style] - 設(shè)置或獲取樣式。
* [*selection*.property]- 設(shè)置或獲取行內(nèi)屬性。
* [*selection*.text]- 設(shè)置或獲取文本內(nèi)容。
* [*selection*.html]- 設(shè)置或獲取inner HTML。
* [*selection*.append] - 創(chuàng)建，添加或選擇新的元素。
* [*selection*.remove]- 移除文檔中的元素。
* [*selection*.sort] - 基于數(shù)據(jù)給文檔中的元素排序。
* [*selection*.order] - 重排列文檔中的元素以匹配選擇中的順序。
* [*selection*.raise] - 重新排列每個元素為父元素的最后一個子節(jié)點。
* [*selection*.lower] - 重新排列每個元素為父元素的第一個子節(jié)點。
* [d3.creator] - 通過名稱創(chuàng)建元素。
參考文獻(xiàn)：https://github.com/tianxuzhang/d3.v4-API-Translation#selections
