Code Monkey home page Code Monkey logo

hierarchy's Introduction

@antv/hierarchy

Layout algorithms for visualizing hierarchical data.

Build Status npm Version npm Download npm License

API

example

const Hierarchy = require('@antv/hierarchy');

// your tree data
const root = {
  isRoot: true,
  id: 'Root',
  children: [
    {
      id: 'SubTreeNode1',
      children: [
        {
          id: 'SubTreeNode1.1'
        },
        {
          id: 'SubTreeNode1.2'
        }
      ]
    },
    {
      id: 'SubTreeNode2'
    }
  ]
};

// apply layout
const NODE_SIZE = 16;
const PEM = 5;
const ctx = document.getElementById('id-of-canvas-element').getContext('2d');
const rootNode = Hierarchy.compactBox(root, {
  direction: 'H', // H / V / LR / RL / TB / BT
  getId(d) {
    return d.id;
  },
  getHeight(d) {
    if (d.isRoot) {
      return NODE_SIZE * 2;
    }
    return NODE_SIZE;
  },
  getWidth(d) {
    if (d.isRoot) {
      return ctx.measureText(d.id).width * 2 + PEM * 1.6;
    }
    return ctx.measureText(d.id).width + PEM * 1.6;
  },
  getHGap(d) {
    if (d.isRoot) {
      return PEM * 2;
    }
    return PEM;
  },
  getVGap(d) {
    if (d.isRoot) {
      return PEM * 2;
    }
    return PEM;
  },
  getSubTreeSep(d) {
    if (!d.children || !d.children.length) {
      return 0;
    }
    return PEM;
  }
});

layout types

Hierarchy[type]

compactBox

this layout differs from d3-hierarcy.tree, it is a compact box tidy layout that is tidy in both horizontal and vertical directions.

demos

LR RL H
LR RL H
TB BT V
TB BT V

dendrogram

demos

LR RL H
LR RL H
TB BT V
TB BT V

indented

demos

LR RL H
LR RL H

mindmap

this layout is inspired by XMind.

demos

mindmap

hierarchy's People

Contributors

baizn avatar elaine1234 avatar hustcc avatar imgbot[bot] avatar leungwensen avatar simaq avatar ttys026 avatar yanyan-wang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hierarchy's Issues

Is there any @types library for @antv/hierarchy

I am currently using typescript and looking around for types definition support for this brilliant library.
I was wondering if there is any declaration of it written by you smart guys or some third parties?

同一层级中,不同的父节点与子节点之间的垂直间距不同,如何保证连接线不出现弯曲,不对称

  const result = Hierarchy.mindmap(data, {
      direction: 'LR',
      getHeight(d: node) {
        return d?.height;
      },
      getWidth(d: node) {
        return d?.width;
      },
      getHGap() {
        return 40;
      },
      // 父节点与子节点之间的垂直间距
      getVGap(d: MindMapData) {
        // 缩小节点间的间距。如果出现了校验不通过,那么将高度重置
        return d.type === NodeType.xx&& d.msg? 20 : 8;
      },
      getSide: () => {
        return 'right';
      },
    });
  • Link:
  • Platform:
  • Mini Showcase(like screenshots):

正常如下:
image

然后操作过后,出现了第二层和第三层中间的连接线是不对称的,如下

image

请问这个bug怎么解呢?

紧凑树计算位置出错

如下图所示,在第 3 列中绿色卡片与白色卡片并未相交, 但由于第 5 列太宽了,绿色卡片就与白色卡片间出现了间隙。

我 fork 了你的代码,demo 中是造好的数据,你可以下载下来快速查看。链接点我

希望得到您的帮助,谢谢!

position error

hierarchy.compactBox 返回的 Node 的 eachNode 实例方法变成了 each

你好,今天在看 G2 的文档的时候发现 https://antv.alipay.com/zh-cn/g2/3.x/demo/other/tree-compact-box.html 这个页面的示例代码出错了,似乎一共是两处错误

  1. DataSet.View#getAllNodes 里调用了 Node#each ,但其实应该是 Node#eachNode
  2. 第 75 行代码尝试读取 item.point.hasChildren ,但似乎 API 已经发生变化了,应该是 item.hasChildren

想要修复第一个问题时,一开始以为是 data-set 这个库的代码有问题,但在我 fork 并修改了 data-set 这个仓库的代码后,单元测试报错说没有 eachNode 这个方法,于是我打印了一下 Node 的原型的属性:

https://github.com/bolasblack/data-set/blob/b32d2f5e27f315d599fe6065db98c9047c2948c1/test/unit/api/hierarchy-spec.js#L12

结果是

image

真的有 each 但没有 eachNode

我检查了很久没有找到原因,只发现在 node_modules/@antv/hierarchy/lib/layout/ 中对比 src/layout/ 多出了一个 node.js 文件,里面确实有 each 方法没有 eachNode 方法

但是在我尝试重新生成 lib 目录,并且删除 build 和 dist 目录后,依旧存在这个问题

我实在没辙了,只好发一个 issue ……

如果你们有空的话可以顺便修一下上面提到的文档里的代码,如果优先级不高的话也可以等我把这个问题解决我再提一个 PR 更新一下上面的文档……

indented tree布局的顺序

发现indented布局(其他布局没有看过)的子节点顺序是从下到上的,当children数组中顺序是(0,1,2)的时候,布局节点从上到下是2,1,0,这点似乎与习惯不太一样。不知道这是个bug还是个feature。或者是否有一个配置可以配从上到下或从下到上。

  • Link:
  • Platform:
  • Mini Showcase(like screenshots):

TypeError: Cannot read properties of null (reading 'index')

使用Hierarchy.compactBox函数,在dev模式下运行正常,在production模式下会报错:TypeError: Cannot read properties of null (reading 'index')

发生错误的函数为内部函数,似乎是未作非空判断,

  • 操作系统:windows11
  • "@antv/hierarchy": "^0.6.11"
  • "vue": "^3.4.19"
  • "vite": "^5.1.4"

image
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.