首页 > 其他分享 >可视化 — D3学习笔记小小案例记录一下

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

时间:2023-01-02 21:46:04浏览次数:69  
标签:node style 笔记 D3 可视化 节点 height 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

标签:node,style,笔记,D3,可视化,节点,height,d3
From: https://www.cnblogs.com/sexintercourse/p/17020591.html

相关文章

  • 大神博客【学习笔记】
    ​​蜗窝科技​​​​http://www.wowotech.net/​​GitHub的RK平台大声:​​https://github.com/dearsq/Note-xiaoshujiang/tree/master/Android​​吴恩达机器学习笔记:​​......
  • Kafka学习笔记(二):Topics, Partitions and Offsets
    KafkaTopicsTopics:一种特殊的数据流就像数据库中的表,但没有所有的约束可以有任意多的Topics一个Topic由它的name定义任意格式的消息格式Topic中的消息序列......
  • (组合数学笔记)Pólya计数理论_Part.10_Pólya定理的推广——De Bruijn定理的母函数形式
    文章目录写在前面介绍DeBruijn定理的母函数形式,由此《(组合数学笔记)Pólya计数理论》系列完结。引入与Pólya定理的母函数形式的推导类似,首先引入模式清单的概念,并介绍两个......
  • 工业控制系统安全控制选择过程应用 学习笔记
    声明本文是学习​​GB-T32919-2016信息安全技术工业控制系统安全控制应用指南.下载地址http://github5.com/view/585​​而整理的学习笔记,分享出来希望更多人受益,如......
  • 杜教筛学习笔记
    杜教筛是拿来求积性函数前缀和的东西\(h=f*g\)\(s(n)=\sum\limits_{i=1}^ng(i)\)而杜教筛可以在\(O(n^{\frac23})\)的复杂度内求出\(s(n)\),前提是存在两个很好求前......
  • Vue-element-template项目学习笔记
    1.vue在css引入背景图片报错:Modulenotfound:Error:Can'tresolve'../../images/icons/loading2.gif'in'/home。报错信息就是找不到路径,我是这样的写法:backgroun......
  • Markdown学习笔记
    Markdown学习一级标题:一个#+一个空格+标题名字+回车二级标题二级标题:2个#+一个空格+标题名字+回车三级标题三级标题:3个#+一个空格+标题名字+回车字体Hello,World!......
  • 学习笔记:网络流
    学习笔记网络流基本概念一个网络是一张有向无环图,每条边有容量\(w\),表示这条边最多能容纳多少流量,入度为0的点叫源点\(s\),出度为0的点叫汇点\(t\),源点有无限流量......
  • 学习笔记:MIn_25筛
    Min_25筛学习笔记叫这个名字是因为这是\(Min\_25\)神犇发明的,主要用到的思想是对于质数和合数分开计算。适用范围对于一个积性函数\(f(x)\)求解:\[\sum_{i=1}^{n......
  • MySql学习笔记--基础篇02
    约束外键--父表和子表,如果要删除父表的记录时,会判断子表是否存在关联关系,如果存在不予删除  多表关系一对多,在此表中建立外键关联主表的主键多对多,建立第三张中......