deltoss / d3-mitch-tree Goto Github PK

View Code? Open in Web Editor NEW

82.0 82.0 42.0 7.16 MB

D3 plugin to create stunning interactive tree visualisations.

License: MIT License

JavaScript 97.66% CSS 2.34%

d3-mitch-tree's People

Contributors

Stargazers

Watchers

d3-mitch-tree's Issues

Changing the orientation of the tree

Hi,

I must commend the great effort you've put in to this project. It is really awesome.

Please I will like to know if it is possible to change the orientation of the tree, let's say from top to bottom or any other, instead of the default left to right.

Thanks.

Want to add image in D3 mitch tree node .

Hi Deltoss,
I want to add image in every node of that users. In json response i'm sending the path of image.
Is it possible to show image?

Update package json

Hey, love the work you've put into this library, could you update the package json so the latest releases will update on the npm registry?

I need that when the page loads the layout don't get zoomed or fit, maybe reducing the initial zoom or set the setMinScale provided, because the treelayout gets really big initially and is needed only that the user apply zoom with the mousewheel with the setAllowZoom.

Thanks!

setHorizontalSpacing not honored when setBodyBoxWidth also used

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

I'm submitting a ...
- bug report
- feature request
- support request => Please do not submit support request here, see note at the top of this template.
Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

setHorizontalSpacing is not respected if setBodyBoxWidth is also used. It's only the latter that gets performed, whichever order they're called in (I'm using the default left-to-right orientation).

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

Just take any of the basic box examples bundled with the code release and ensure the following call for getNodeSettings:

.getNodeSettings()
          .setSizingMode('size')
          .setBodyBoxWidth(250)
          .setHorizontalSpacing(200)
          .back()

What is the expected behavior?

That both the box width and horizontal spacing between nodes adopt the above values.

What is the motivation / use case for changing the behavior?

The default box width is too small for my purpose, so I need to make the boxes wider. This results in the boxes starting to encroach on each other.

Please tell us about your environment:
- Version: 1.1.2
- Browser: all
- Language: Javascript

How to open a link by clicking on a node with special id?

According to issue #6 :
What should I do if I want to open a link by clicking on a special node? for example, by clicking on a node with id 1 opens https://google.com and by clicking on a node with id 2 opens https://yahoo.com
Thanks

How to export it as xml file or save it with last choice I choose

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

I'm submitting a ...
- bug report
- feature request
- support request => Please do not submit support request here, see note at the top of this template.
Do you want to request a feature or report a bug?
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
What is the expected behavior?
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
- Version: 2.0.0-beta.X
- Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
- Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]
Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Request to add two features to the project

Hello
I use your project to show my work to the employer
Please add two features to your project:

In the Felt Data model, there is the possibility of canceling the whole tree movement. (Cancel zoom mode)
2- When clicked on a node, open a special link (such as a website) instead of zooming in.
Sorry for English
Thanks

Is there a way to prevent auto collapsing when a node is selected?

I saw the example where it shows how to expand all the nodes when you load the tree structure but when one is selected it then collapses the child's nodes, is there a way just to keep it open indefinitely.

Is there a way to setup text inside node with html markup?

Orientation Doesn't work anymore

the example "Basic Example with Circle Tree with TopDown Orientation.html" : doesn't work
same for "Basic Example with TopDown Orientation.html"
error message :

pls help me i want to to a vertical tree

ReactJS

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

I'm submitting a ...
- bug report
- feature request
- support request => Please do not submit support request here, see note at the top of this template.
Do you want to request a feature or report a bug?

How do you call the control from ReactJS?

What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
What is the expected behavior?
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
- Version: 2.0.0-beta.X
- Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
- Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]
Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Is this library Maintained?

Hi,

@deltoss - We are planning to use this library in our typescript project, however we do see issues related to vulnerabilities and typecasting, since there are no commits from past few years, wanted to check if it is recommended to use in production? Kindly assist

Thanks

Custom Path for Links

Hello
is there any way to apply this custom path to links, and make it work with the transition in the tree layout?

treePlugin.getPanningContainer().selectAll('.link').attr("d", function(d){
  return "M" + d.parent.y + "," + (d.parent.x-45)
    + "H" + (d.parent.y + (d.y-d.parent.y)/1.4)
    + "V" + (d.x-45)
    + "H" + d.y;
});

Q: Custom color each level, and all levels visible

How would be the right approach with this plugin to give each leveldepth group a class so i can give custom style to the elements of each level, i've tried to do it with d3.selectAll but when i select the attribute class the elements gets the browser default so everything looks black.

And its possible to have all the levels visible on start?

Bug: vertical and horizontal spacing is not respected if orientation is 'topToBottom'

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

I'm submitting a ...
- [ x] bug report
What is the current behavior?

If I specify the vertical and horizontal spacing this way:

var treePlugin = new d3.mitchTree.boxedTree()
    ...
    .getNodeSettings()
        .setSizingMode('nodesize')
        .setVerticalSpacing(100)				
        .setHorizontalSpacing(50)
        .back()
    .initialize();

it works nice if the orientation is the default 'leftToRight'. If I change it to 'topToBottom' it is not
respected at all.
That is a big drawback for my use case.

What is the expected behavior?
Values for the spacing and margin should be respected in each orientation.
Please tell us about your environment:
- Version: 1.1.2
- Browser: [Chrome | Safari]
- OS: Mac Catalina 10.15.4

Can I make the Textbox collapsible to fill it with more description?

I want the Nodeboxes to fill more words for the description, including a link to folow maybe. How can I make the boxes fit the content?

I know, that the function to fill the Textbox is:

// D3Plus Textbox with resizing capability
        var d3PlusBodyTextBox = new d3PlusTextBox()
            .select(element) // Sets the D3Plus code to append to the specified DOM element.
            .data(singledOutData)
            .text((data, index, arr) => {
                return self.getBodyDisplayText.call(self, data);
            })
            .textAnchor("middle")
            .verticalAlign("middle")
            .fontSize(13) // in pixels
            .x(nodeBodyBoxPadding.left)
            .y(recalculatedPaddingTop - nodeBodyBoxHeight / 2)
            .width(nodeBodyBoxWidth - nodeBodyBoxPadding.left - nodeBodyBoxPadding.right)
            .height(nodeBodyBoxHeight - recalculatedPaddingTop - nodeBodyBoxPadding.bottom)
            .ellipsis((text, line) => {
                // If text was cut-off, add tooltip
                selection.append("title")
                    .text(self.getBodyDisplayText(data));
                return ((text.replace(/\.|,$/g, "")) + "...");
            })
            .render();
    });

I am not sure, how to change it, so it will would fit my content inside the, or the box is spread out by the lenght of my conten. It would be great to know how to do that.

Thank you :)

Apply CSS on child nodes expanded on click of their parentNode expendanded

Is it possible to apply css on child nodes when we click on the parent node we expand ?

I'm trying to do it by triggering the expand event.

But the css is only applied on each childs when I click on one of the child node.

When I click on the Parent node for expanding, the default css is applied.

.on("nodeClick", function(event, data) {

                        console.log("ACTION DATA CSS")
                        console.log(event)
                        let fils = d3.selectAll(event.nodeDataItems)
                        console.log(fils)
                        fils.attr("id",function(d) {return btoa(d.id).replace('=', '');})
                        fils.filter(function(d) {
                            let borderColor = "gray";
                            let borderWidth = "1px";
                            if (d.data.ID){
                                let foundWidth = false
                                let foundColor = false
                                for (let i=0;i<node_fields["node_content"].length;i++){
                                    if (node_fields["node_content"][i]["ID"] == d.data.ID){
                                        if (node_fields["node_content"][i]["borderWidth"]){
                                            borderWidth = node_fields["node_content"][i]["borderWidth"]
                                            foundWidth = true
                                        }
                                        if (node_fields["node_content"][i]["borderColor"]){
                                            borderColor = node_fields["node_content"][i]["borderColor"]
                                            foundColor = true
                                        }
                                    }
                                    if (foundWidth && foundColor){
                                        break
                                    }
                                }
                            }
                            d3.select("#"+btoa(d.data.id).replace('=', '')+">g>rect").attr("stroke-width", borderWidth)
                            d3.select("#"+btoa(d.data.id).replace('=', '')+">g>rect").attr("stroke", borderColor)
                        });
                        fils.selectAll(".body-group>.d3plus-textBox>text")
                            .style("font-weight", "bold")
                            .style("font-size", "20px")


                        let deroulement = $("#deroulement")
                        deroulement.empty()
                        deroulement.css("border-top", "0.5px lightgray solid")
                        //deroulement.css("border-bottom", "0.5px lightgray solid")
                        tree.getWholePath(event.nodeDataItem)

                        // This would cancel collapse of nodes,
                        // but it'll still select the node
                        // and center to it
                        this.removeSelection(this.getRoot());
                        event.nodeDataItem.selected = true;
                        if (this.getAllowNodeCentering())
                            this.centerNode(event.nodeDataItem);
                        this.update();

                        // Cancel the collapse event
                        /*
                        if (event.type === 'collapse')
                            event.preventDefault();
                        if (event.type === 'centerNode')
                            event.preventDefault();
                        */


                    })

Right Click Event

Hi, Is there a way to define a right click event so I can open a context menu on the clicked node?
Thanks.

Is there a way to use this library with React?

This package is really appealing and we'd like to know if there's a way to integrate it with React components. Since it needs an element to be passed I tried to create a ref in React, but I'm getting various errors like:

TypeError: Cannot read property '__zoom' of null
Pi [as zoomTransform]
node_modules/d3-mitch-tree/lib/d3-mitch-tree.js:3221
  3218 | var zi = new Ni(1, 0, 0);
  3219 | 
  3220 | function Pi(t) {
> 3221 |   return t.__zoom || zi;
       | ^  3222 | }
  3223 | 
  3224 | function ji() {

Could you help us out here on how to use this library with React?

d3-mitch-tree padding between nodes with children

how to avoid spaces between blocks if node has children?

1. You can use the event object on node click. See this [example](https://github.com/deltoss/d3-mitch-tree/blob/master/examples/Advanced%20Example%20with%20Node%20Click%20Event.html#L209) for more information.

'Dist' folder is no longer available

I am trying to use this libary for my new project but as per readme, the 'dist' folder is no longer available to download,

Is there any way, I can pick the latest version?

Converting JSON hierachy data to D3 tree hierarchy

I am trying to create d3 BoxedTree for which I need hierarchical tree in slightly different format. I have input data as below. (First Format):

{
  "Parent": "Enterprise Risk Management Framework",
  "Type": "Root",
  "url": "",
  "Child": "Risk Governance Framework",
  "description": "Enterprise Risk Management Framework",
  "id": 0,
  "child_id": 3,
  "children": [
    {
      "Parent": "Risk Governance Framework",
      "Type": "Stem",
      "url": "",
      "Child": "Wholesale Credit Risk Framework",
      "description": "Risk Governance Framework",
      "id": 3,
      "child_id": 4,
      "children": [
        {
          "Parent": "Wholesale Credit Risk Framework",
          "Type": "Stem",
          "url": "",
          "Child": "Wholesale Credit Risk Policy",
          "description": "Wholesale Credit Risk Framework",
          "id": 4,
          "child_id": 6,
          "children": [
            {
              "Parent": "Wholesale Credit Risk Policy",
              "Type": "Stem",
              "url": "",
              "Child": "Wholesale Credit In-Business Quality Assurance Standard",
              "description": "Wholesale Credit Risk Policy",
              "id": 6,
              "child_id": 7,
              "children": [
                {
                  "Parent": "Wholesale Credit In-Business Quality Assurance Standard",
                  "Type": "Leaf",
                  "url": "",
                  "description": "Wholesale Credit In-Business Quality Assurance Standard",
                  "id": 7
                }
              ]
            },
            {
              "Parent": "Wholesale Credit Risk Policy",
              "Type": "Stem",
              "url": "",
              "Child": "WCR Exception Management Standard",
              "description": "Wholesale Credit Risk Policy",
              "id": 6,
              "child_id": 8,
              "children": [
                {
                  "Parent": "WCR Exception Management Standard",
                  "Type": "Leaf",
                  "url": "",
                  "description": "WCR Exception Management Standard",
                  "id": 8
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "Parent": "Risk Governance Framework",
      "Type": "Stem",
      "url": "",
      "Child": "Global Collateral Management Policy",
      "description": "Risk Governance Framework",
      "id": 3,
      "child_id": 9,
      "children": [
        {
          "Parent": "Global Collateral Management Policy",
          "Type": "Stem",
          "url": "",
          "Child": "WCR Collateral Management Standard",
          "description": "Global Collateral Management Policy",
          "id": 9,
          "child_id": 10,
          "children": [
            {
              "Parent": "WCR Collateral Management Standard",
              "Type": "Leaf",
              "url": "",
              "description": "WCR Collateral Management Standard",
              "id": 10
            }
          ]
        }
      ]
    },
    {
      "Parent": "Risk Governance Framework",
      "Type": "Stem",
      "url": "",
      "Child": "Real Estate Appraisal and Valuation Policy",
      "description": "Risk Governance Framework",
      "id": 3,
      "child_id": 11,
      "children": [
        {
          "Parent": "Real Estate Appraisal and Valuation Policy",
          "Type": "Stem",
          "url": "",
          "Child": "Commercial Real Estate Appraisal/Valuation Standard",
          "description": "Real Estate Appraisal and Valuation Policy",
          "id": 11,
          "child_id": 12,
          "children": [
            {
              "Parent": "Commercial Real Estate Appraisal/Valuation Standard",
              "Type": "Stem",
              "url": "",
              "Child": "Commercial Real Estate Appraisal/Valuation Procedures",
              "description": "Commercial Real Estate Appraisal/Valuation Standard",
              "id": 12,
              "child_id": 13,
              "children": [
                {
                  "Parent": "Commercial Real Estate Appraisal/Valuation Procedures",
                  "Type": "Leaf",
                  "url": "",
                  "description": "Commercial Real Estate Appraisal/Valuation Procedures",
                  "id": 13
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Expected JSON hierarch format for creating d3 BoxedTree. (Second Format)

{
					"id": 0,
					"name": "Enterprise Risk Management Framework",
					"type": "Root",
					"description": "Enterprise Risk Management Framework",
					"url":  "",
					"children": [
						{
							"id": 3,
							"name": "Risk Governance Framework",
							"type": "Stem",
							"description": "Risk Governance Framework",
							"url":  "",
							"children": [
								{
									"id": 4,
									"name": "Wholesale Credit Risk Framework",
									"type": "Stem",
									"description": "Wholesale Credit Risk Framework",
									"url":  "",
									"children": [
										{
											"id": 6,
											"name": "Wholesale Credit Risk Policy",
											"type": "Stem",
											"description": "Wholesale Credit Risk Policy",
											"url":"",
											"children": [
											{
												"id": 7,
												"name": "Wholesale Credit In-Business Quality Assurance Standard",
												"type": "Leaf",
												"description": "Wholesale Credit In-Business Quality Assurance Standard",
												"url":"",
												"children": []
											
											},
											{
												"id": 8,
												"name": "WCR Exception Management Standard",
												"type": "Leaf",
												"description": "WCR Exception Management Standard",
												"url":"",
												"children": []
											
											}
											
											
											]
										}
									]
								},
								{
									"id": 9,
									"name": "Global Collateral Management Policy",
									"type": "Stem",
									"description": "Global Collateral Management Policy",
									"url":"",
									"children": [
										{
											"id": 10,
											"name": "WCR Collateral Management Standard",
											"type": "Leaf",
											"description": "WCR Collateral Management Standard",
											"url":"",
											"children": []
										}
									]
								},
								{
									"id": 11,
									"name": "Real Estate Appraisal and Valuation Policy",
									"type": "Stem",
									"description": "Real Estate Appraisal and Valuation Policy",
									"url":"",
									"children": [
										{
											"id": 12,
											"name": "Commercial Real Estate Appraisal/Valuation Standard",
											"type": "Stem",
											"description": "Commercial Real Estate Appraisal/Valuation Standard",
											"url":"",
											"children": [
												{
													"id": 13,
													"name": "Commercial Real Estate Appraisal/Valuation Procedures",
													"type": "Leaf",
													"description": "Commercial Real Estate Appraisal/Valuation Procedures",
													"url":"",
													"children": []
												}
											]
										}
									]
								}
							
								
							]
						}
					]
				}

Can someone help to know how to transform first format to second format using javascript?

Display from right to left (Root on the right)

Anyway to easily reverse the display from right to left instead of left to right?
I need the root node to start from the right.

How to give margin to nodes?

Hey,

I want to give margin between children nodes, In case of expand, all of them are too nested.

Like as;

Can you reduce spacing between groups of 'children' in boxed tree mode?

Is there a way to reduce this distance without the boxes overlapping? This doesn't seem to be configurable.

I'm using "Advanced Example Expand All Nodes.html" but just with these extra settings to prevent overlapping of boxes on the right hand side:

	.getNodeSettings()
		.setSizingMode('nodeSize')
		.setVerticalSpacing(20)				
		.setHorizontalSpacing(50)
		.setTitleBoxHeight(30)
		.back()

Thanks!
Nick

How to delete a node with or without a child.

Hello. I've been trying to remove a node dynamically but the way I've been doing it it's really not working because I may remove the selected node but its child remains and, of course, I get an error when building the tree because the properties can't find it's parent.

I actually just been filtering the object. Is there a better way to do this?

document.getElementById('removeButton').addEventListener('click', function(){
   var value = document.getElementById('removeText').value;
   data = data.filter(function( obj ) {
      return obj.name !== value;
   });

   var treePlugin = new d3.mitchTree.boxedTree()
      .setIsFlatData(true)
      .setData(data)
      .setElement(document.getElementById("visualisation"))
      .setIdAccessor(function(data) {
         return data.id;
      })
      .setParentIdAccessor(function(data) {
         return data.parentId;
      })
      .setBodyDisplayTextAccessor(function(data) {
         return data.description;
      })
      .setTitleDisplayTextAccessor(function(data) {
         return data.name;
      })
      .initialize();
});

This is how I've been doing.

Feature request: Differentiate click on box label from box body

From my experience with this library so far, I can't seem to differentiate between a nodeClick event between one done on the node label (HTML class "title-group") or the main body (HTML class "body-group"). It would be really useful to us to expose this detail as we'd like to redirect (as per solved issue #7) only if the label is clicked.

Thanks.

Tree breaking in IE 11: 'Symbol' is undefined

When I load the tree in IE 11 it throw's an error and doesn't' allow the tree to load. Installing the babel/polyfill fixes the issue but I can't include an extra library at the moment. Do you know which function is causing the issue so I could manually create the polyfill?