安装
npm install d3 --save-dev
应用
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里面的内容全部被重写了。那么下来就介绍两个上面例子用到的选择器：
选择元素
* [d3.selection]- 选择根文档元素。
* [d3.select] - 从文档中选择一个元素。
* [d3.selectAll] - 从文档中选择多个元素。
* [*selection*.select] - 选择每个选中元素的一个后代元素。
* [*selection*.selectAll] - 选择每个选中元素的多个后代元素。
* [*selection*.filter]- 基于数据过滤元素。
* [*selection*.merge] - 合并两个选择。
* [d3.matcher] - 测试一个元素是否匹配选择器。
* [d3.selector]- 选择一个元素。
* [d3.selectorAll] - 选择多个元素。
* [d3.window] - 得到节点的所有者窗口。
修改数据
* [*selection*.attr]- 设置或获取特性。
* [*selection*.classed]- 获取，添加或移除CSS类。
* [*selection*.style] - 设置或获取样式。
* [*selection*.property]- 设置或获取行内属性。
* [*selection*.text]- 设置或获取文本内容。
* [*selection*.html]- 设置或获取inner HTML。
* [*selection*.append] - 创建，添加或选择新的元素。
* [*selection*.remove]- 移除文档中的元素。
* [*selection*.sort] - 基于数据给文档中的元素排序。
* [*selection*.order] - 重排列文档中的元素以匹配选择中的顺序。
* [*selection*.raise] - 重新排列每个元素为父元素的最后一个子节点。
* [*selection*.lower] - 重新排列每个元素为父元素的第一个子节点。
* [d3.creator] - 通过名称创建元素。
参考文献：https://github.com/tianxuzhang/d3.v4-API-Translation#selections
