可视化—D3学习笔记小小案例记录一下

D3全称是Data-Driven Documents数据驱动文档，是一个开源的javascript库，可以用于数据可视化图形的创建，该库更接近底层，与 g2、echarts 不同，d3 能直接操作 svg，所以拥有极大的自由度，几乎可以实现任何 2d 的设计需求。

正如其名 Data Driven Documents，其本质是将数据与 DOM 绑定，并将数据映射至 DOM 属性上，D3扮演的是一个驱动程序的角色，联系着数据和文档。

与echarts 相比，D3.js 不会生成事先定义好的图表，而是提供一些方法用来生成带数据的标签，绑定可视化的属性，由自己定义如何制作图表，还提供很多数据处方法，可以更好的显示的数据模型。echarts 可以提供更方便的图表组件，满足大部分的需求，D3.js 可以提供更丰富的自定义功能，适合定制化。

学习D3.js 更多的时候是学习它如何加载、绑定数据、数据处理、变换和过渡等这些方法的过程，而且D3.js 用了一种与 jQuery 一样的 链式语法。官方文档的 API 非常的多，本文也只是小小的记录一下项目实现。功能比较简单，做个记录。

下载依赖包： npm install d3 d3-graphviz@4

App.vue

<template>
  <div id="app">
    <Graph :code="jsonToDot()"/>
  </div>
</template>

<script>
import Graph from "./components/Graph";   // 封装了一个子组件
export default {
  data() {
    return {
      dot: JSON.stringify({   // 测试数据
         foo: ["bar", "buzz"],
        bar: ["foo"],
        norf: ["bar", "buzz"],
        worf: ["a"],
        fizz: ["buzz"],
        worble:["norf","buzz"],
        buzz:["norf","worf"],
        a:["b","c"],
        b:["d","f"]
      })
    };
  },
  components: {
    Graph
  },
  methods: {
    jsonToDot() {  // 处理数据格式为 插件可以解析的格式
      const json = JSON.parse(this.dot);
      return (
        Object.entries(json).reduce((acc, [node, dependencies]) => {
          return dependencies.reduce(
              /**
              * 此处为单个节点关系，设置样式
              * arrowsize: 箭头尺寸
              * color：连接线的颜色
              * style：节点边框形状，rounded 圆角
              */
            (acc, dependency) => acc + `  "${node}" -> "${dependency}"\n [arrowsize=.4, color=grey, style="rounded"]`,
            acc
          );
           /**
           * 此处设置graph图所有点线关系的统一样式
           * ranksep: node之间的间距
           * graph - rankdir: 布局方向，LR从左到右，TB从上到下(默认)
           * graph - bb: 以点为单位的绘图边界框
           * node - margin: 节点内边距
           * node - shape: 节点形状
           * node - height: 节点高度
           * node - style:  节点样式，圆角，填充色
           * node - color:  颜色
           * node - fillcolor:  背景填充色
           * edge - style: 连线样式 solid实线
           * edge - arrowhead: 连线箭头样式
           * edge - arrowtail: 连线箭尾样式
           * ......
           * 还有很多属性，可参考下方提供的参考文档
           */
        },`digraph G { ranksep = 2.0; graph [rankdir=LR,bb="0,0,412.05,372.8"];node [margin=".3,.1",shape=box,height=.3, style="rounded,filled", color="lightgreen", fillcolor="lightgreen"]; edge [style=solid,arrowhead=normal,arrowtail=dot,]; \n`) + "}"
      );
    }
  }
};
</script>

Graph.vue： 其中/@hpcc-js/wasm/dist/index.min.js该文件服务器地址不是很稳定，建议下载下来，存在自己项目的服务器上。

<template>
  <div>
    <script src="https://unpkg.com/@hpcc-js/wasm/dist/index.min.js" type="javascript/worker"/>
    <div id="graph"/>
  </div>
</template>
<script>
import * as d3 from 'd3'
import * as d3Graphviz from 'd3-graphviz'
export default {
  props: {
    code: {
      type: String,
      default:  `digraph G {
            node [shape="record"];
            edge [style="dashed"];
            a -> b
          }`
    }
  },
  methods: {
   render() {
      // scale 缩放比例
      // fit(true) 自适应缩放，当节点比较多时可以显示完成的图，但是会看不清楚，节点较少时，会很大，慎用！！默认值false
      d3Graphviz.graphviz("#graph").width(window.innerWidth).height(1500).scale(0.8).attributer(function (d) {
        // 当节点非常多时，默认将主节点调至视口中间。 适用于数据量差不多的数据，统一调整图表视口，否则数据较少时，图表上移可视窗口会看不见
        /* const px2pt = 3 / 4;
        * if (d.tag === 'svg') {
        *   var selection = d3.select(this);
        *   var width = d.attributes.width;
        *   var height = d.attributes.height;
        *   var w = d.attributes.viewBox.split(" ")[2];
        *   var h = d.attributes.viewBox.split(" ")[3];
        *   var x = (width - w) / 3;
        *   var y = height;
        *   console.log(width, height, w, h, x, y, width * px2pt, height * px2pt);
        *   //   selection.attr("viewBox", -x + " " + y + " " + w + " " + (height * px2pt));
        *   d.attributes.viewBox = 0 + " " + 0 + " " + w + " " + h;
        *  }
        */
        // 当节点非常多时，默认将主节点调至视口中间。比例是我自己估算的， 适用于数据数量不确定，相差较大的数据
        const childNum = 8 / 5;
        if (d.tag === 'g' && d.parent.tag == 'svg') {
          if (d.children.length > 500) {
            d.translation.y = d.children.length * childNum
          }
        }
      }).renderDot(this.code)
    }
  },
  mounted() {
    this.render();
  },
  watch: {
    code() {
      this.render();
    }
  }
};
</script>

实现效果图:

官方文档：

Graphviz

d3-graphviz

官方案例参考 D3 Graphviz Examples：

案例列表： https://codesandbox.io/examples/package/d3-graphviz

本人参考案例：https://codesandbox.io/s/graph-viz-ltx0q-ltx0q?file=/src/App.vue