ssthouse / tree-chart Goto Github PK

Hello
Is there a feature to switch the chart to the corresponding node location ?

效果图：https://cqxiaowen.oss-cn-hangzhou.aliyuncs.com/202205/021030472ILQR
目前开源的tree都是单一的父节点，无法实现配偶节点，请问能否在此基础上进行配偶节点配置

Could you add a license file (like MIT, Apache, ...) to your project so that others are allowed to use your code?

I really love your tools and everything work just fine, but when I zoom in or out the line between the nodes doesn't respond properly.
Here a few pics:

codesandbox

How is the code

How do I need the code

I would like to pass a field node.collapsed to load a specific node with its children collapsed. This way, for nodes with a ton of children, we can save some screen space. It looks like v-bind:collapsed="node.data._collapsed" and onClickNode() is responsible for setting node.data._collapsed and node.data.children to null. I'm thinking that I could initialize node.data._collapsed and node.data.children for nodes that I want collapsed to begin with. My question is, is there a function where it would make sense to add it?

@ssthouse Thanks for this repo once again.

Is there a way to add zoom in and zoom out on "mouse wheel scroll" . Most of the examples in the d3 library use d3's zoom event.

Do you have an idea how we can enable zoom with mouse scroll?

It just gives me an error:

ERROR in %project%/client/src/apps/office/components/hierarchy/HierarchyTree.vue(7,21):
7:21 Could not find a declaration file for module '@ssthouse/vue-tree-chart'. '%project%/client/node_modules/@ssthouse/vue-tree-chart/library/vue-tree-chart.js' implicitly has an 'any' type.
  Try `npm install @types/ssthouse__vue-tree-chart` if it exists or add a new declaration (.d.ts) file containing `declare module '@ssthouse/vue-tree-chart';`

I've tried to create a shims-vue-tree-chart.d.ts file inside the src dir of my Vue project, but it didn't help. Two variants of its contents, both not working:

declare module '@ssthouse/vue-tree-chart';

and

import { VueConstructor } from 'vue';
declare module '@ssthouse/vue-tree-chart' {
  export = VueConstructor;
}

when I open the component then close it and re-open it again with different data. the nodes are far left or right depend on the action I made in the first time. sometimes the user thinks there is no data because it hidden far right or left.
is there anyway to solve it?
btw I restore scale but didn't work

Hi
Could we have a standard method to programmatically open or close a node?
Thanks.

Hello,
I would love to use you library to build a tree where a child node could have different parent nodes, just like in the image bellow.

I noticed your demo shows zooming functionality on the SVG renderer however there is no method provided in the documentation to do so. I really like this component.

下载后直接运行出现bug
-------胖猪---------
【has a bug in running when once run 】 as ：

你好，请问同层级间节点距离可以调整吗

您好，我这里使用的 /svgTree【富媒体树状图】例子，在我本地无法折叠，不知道为什么？？是还需要其他的支持组件吗？

@ssthouse Sorry for creating another issue. I was not sure if you've gone through my comment in the previous issue.

I ran into an issue as soon as I added a "link hover" css property. I just added the link hover property to highlight a link when it is hovered. But I observed that only the links in the left-half of the chart are being highlighted. The hover action on the right-half of the chart is not working. Do you know any reason why this might be happening?

I just added a simple hover pseudo-selector to the link tag and changed it to color "red" on hover. You can see the issue in the codesandbox below:

https://codesandbox.io/s/loving-lake-3e6p8?file=/src/components/treeview.vue

https://codesandbox.io/s/vue-tree-chart-dm3h3

作者，你写的demo，可以改成折线图吗？改动的成本大不大？

Hi, first of all HUGE thank you for sharing this with community. I have all my data in pouchdb (indexdb) and I would like do dynamically add nodes when user clicks on node. Do you think this would be possible? Thanks for any hint.

缩放后很模糊，如何保存整张图片？

1. restoreScale()不重置位置，节点一多点重置就不显示在显示区域了，能否有个重置位置的api
2. 初始化能否设置具体缩放大小和位置，默认显示不全
3. 另外能否自定义连线样式，比如straight的基础上加个圆角之类的
   ：）

when i want to handle zoomout or zoomin, it casts 'this.$refs.scaleTree.zoomOut is not a function', why?

bug：如果节点宽度在宽的情况下会紧凑一起，后来我在源码中发现，您在组件中 new TreeChartCore 中少传了 treeConfig 的配置，导致组件一直都是默认的配置

VueTree.vue

// 我的建议
init() {
      this.treeChartCore = new TreeChartCore({
        svgElement: this.$refs.svg,
        domElement: this.$refs.domContainer,
        treeContainer: this.$refs.container,
        dataset: this.dataset,
        direction: this.direction,
        treeConfig: this.config
      })
      this.treeChartCore.init()
      this.nodeDataList = this.treeChartCore.getNodeDataList()

      this.initialTransformStyle = this.treeChartCore.getInitialTransformStyle()
    }

first off, very cool tree - and I looked in many forests :)

question: when having large trees zooming is a bit uncomfortable because it just adjust the scale. but if I am I have the mouse over a certain part of the tree (e.g. to the very right) I would like the canvas to zoom into that specific area. currently it zooms in and then I have to drag to get back to that section.

Is there anything one could do to zoom into where the mouse points to?

When using computed properties as :dataset such as:

computed: {
    myDataset() {
        return {value: '1'}
    }

vue throws [Vue warn]: <transition-group> children must be keyed: <div> and the tree does not render properly

I have a search bar. when I write something like a name in that search then this should move the tree automatically to this target node. I have a lot of nodes and this is tough for me to zoom-in or out to view the tree. Anyone can help me to sort out this issue for vue3.

In my task, I would need the possibility to be able to hide/show (not collapsing) individual nodes (children) from the tree according to a certain condition. Would it be possible to add a hide attribute where if true the node would be hidden.

Is there a way to customize the stroke of the links, for example, by changing the stroke width, color, or by making it dashed? I'd like to indicate different relationships based on the stroke of the links from parent to child. In the examples, we can change the style of the nodes, i.e. rich-media-node, based on its attributes, and I'd like to do the same for links.

作者您好，项目需要，github上搜寻到您开发的vue-tree-chart插件，使用Svg版本没问题，但是项目应用中会需要像您这个demo中鼠标滚动放大缩小功能，我尝试了两天了一直实现不了，您有时间的话能发布一个带放大缩小功能的使用方法吗，万分感谢！

I'm trying use vue-tree-chart with my tree object what i receive of api, and i'm getting the error:
<transition-group> children must be keyed: <div>

How to solve? what is causing this?

Thank you very much for this wonderful library.
Just wondering Is there any possible way to navigate the chart using sweeping/touchmove so that I can use it on my phone/tablet?

我将org-chart.js以及其他相关的文件都转换成了ts，然后使用react搭建。在运行的过程中，drawShowCanvas中的

.source(function () {
    return {x: node.attr('sourceX'), y: node.attr('sourceY')}
 })

提示

node.getAttribute is not a function

跟踪源码是进入到了d3-selection的attr.js的

export default function(name, value) {
  var fullname = namespace(name);

  if (arguments.length < 2) {
    var node = this.node();
    return fullname.local
        ? node.getAttributeNS(fullname.space, fullname.local)
        : node.getAttribute(fullname);
  }

  return this.each((value == null
      ? (fullname.local ? attrRemoveNS : attrRemove) : (typeof value === "function"
      ? (fullname.local ? attrFunctionNS : attrFunction)
      : (fullname.local ? attrConstantNS : attrConstant)))(fullname, value));
}

此时node的类型是OrgChart。想问下这是哪里出了问题？

the sandbox code like this, could you tell me what's wrong in this code
--------------------code---------------------------

First of all, thanks for the library.
Is it possible that you can add an export image functionality, or how can I do that?

Hey ssthouse,
thanks for your efforts on this library.
I would like to use this package in typescript project, but unfortunately there are no types included in the npm package and the VueTree.vue is by itself a normal js file.

Do you accept PRs for migrating the VueTree.vue and emitting the types?

Not compatible with IE browser

Thank you very much for this wonderful library.
Just wondering Is there any possible way to navigate the chart using touch events so that I can use it on my phone/tablet?

When tree overflows svg, it is hidden and I can view hidden parts by panning on tree. Is there any way to add scrollbar for view hidden parts instead of panning ?

Need support for scrolling instead of zoom/pan like the below example from D3
https://bl.ocks.org/CrandellWS/ca7e6626c9e6b1413963

Just wanted to open a new issue due to miscommunication on my previous posted issue.

Is there any possible way to navigate the chart using sweeping/touchmove event so that I can use it on my phone/tablet?
I agree that the touch/tap events are already supported which you can tap on the node/card. However, the sweeping/touchmove event is not working for me to navigate around the chart if the tree is too large.

Hello,

it looks like the component is not compatible with Vue 3.
The errors reported are apparently quite common for components that are not compatible:

1. Property "$createElement" was accessed during render but is not defined on instance.
2. Property "_self" was accessed during render but is not defined on instance.

I'm not really sure what triggers them but it looks like doing stuff like

const self = this;

might be part of the issue.

I'd be happy to have a go but I might need some guidance if you know already.

clone本专案编译vue3-chart-tree时，将demo当中范例direction=horizontal时，node位置呈现horizontal，但连接线为vertical。

Hi again,

I notice both in the demo and in my application that the zoom methods don't zoom on the current center.

I think it would be more natural for the zoom to be centered on the current view. I tried making some modifications using transform-origin on the svg and domContainer but wasn't able to make much progress. If you could give me some guidance I could try and make the changes and create a pull request.

Can I style link line ?
ex: link color, link width... etc

Hi, @ssthouse , great library. I was taking a look at it and I was wondering if there is a way to loop back to a parent ? @Maxim-Durand made a great contribution for connecting multiple childs to parents. But is there a way for a child to loop back to a grand parent or a great grand parent. Any inputs would be of great help to me. Is this even feasible ? Below is an example of what I want to achieve.

2. Also is there a possibility to either emit a link clicked event , or add a slot to click, style and add text to links ? That would be great.

Hey, thanks again for the Vue3 version.
It looks like the linkStyle prop is not used, it always draws curved lines.

When testing out the functionality of this package I noticed the collapse wasn't working. I traced it to the core init not properly setting the enableCollapse param. Not sure if other versions are affected.

TreeVue.vue

    init() {
      this.treeChartCore = new TreeChartCore({
        svgElement: this.$refs.svg,
        domElement: this.$refs.domContainer,
        treeContainer: this.$refs.container,
        dataset: this.dataset,
        direction: this.direction,
        treeConfig: this.config,
        collapseEnabled: this.collapseEnabled,       <---------- not present in TreeVue.vue 
      });
      this.treeChartCore.init();
      this.nodeDataList = this.treeChartCore.getNodeDataList();
      this.initialTransformStyle =
        this.treeChartCore.getInitialTransformStyle();
    },

...tree-chart/index.js

    this.treeConfig = {
      nodeWidth: DEFAULT_NODE_WIDTH,
      nodeHeight: DEFAULT_NODE_HEIGHT,
      levelHeight: DEFAULT_LEVEL_HEIGHT,
    };
    this.linkStyle = TreeLinkStyle.CURVE;
    this.direction = Direction.VERTICAL;
    this.collapseEnabled = true;
    this.currentScale = 1;
    if (params.treeConfig) {
      this.treeConfig = params.treeConfig;
    }
    this.collapseEnabled = params.collapseEnabled;       <------------ ends up being undefined.
    this.svgElement = params.svgElement;
    this.domElement = params.domElement;
    this.treeContainer = params.treeContainer;
    this.dataset = this.updatedInternalData(params.dataset);
  }