安装

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