klortho / d3-flextree Goto Github PK

Trying to figure out how to use this in my React app. I've got D3 imported without problems, but can't figure out how to import/load the generated JS files with my component.

Any help would be appreciated!

There are examples of radial d3 trees using the size property but I want to use flexTree to set the node size dynamically. Is there a way to create a radial tree layout with d3-flexTree?

I have this so far:

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import * as d3 from 'd3';
/**
 * `emh-d3-flextree`
 * 
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */
class EmhD3Flextree extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <h2>Hello [[prop1]]!</h2>
    `;
  }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'emh-d3-flextree',
      },
    };
  }
}

window.customElements.define('emh-d3-flextree', EmhD3Flextree);

I try:

import 'd3-flextree/build/d3-flextree.js';

and get

d3-flextree.js:2 Uncaught TypeError: Cannot read property 'd3' of undefined
    at d3-flextree.js:2
    at d3-flextree.js:3
(anonymous) @ d3-flextree.js:2
(anonymous) @ d3-flextree.js:3

How do I import the d3-flextree into an Ecmascript6 module?

My tree-data lies as a plain array at the beginning, so converting to a nested structure is necessary before processing with flextree.

If I use the d3.stratify function it creates a nested structure with the data property containing all the original properties of every node. If I then call the layout.hierarchy on this data it crates a new hierarchy containing the data property containing the data property containing all the original properties 😞

If I call layout directly on the stratified data the resulting layout does not have the right properties.

So shat I was forced to do instead was using different function to create the nested structure (see list-to-tree-lite) to create the flextree hierarchy to compute the layout.

It would be great if the flextree would be able to implement the d3.stratify function as well or at least operate on the stratified data with an option to re-use the data property.

https://www.dignitymemorial.com/obituaries/annapolis-md/christopher-maloney-11590637

Thanks, Chris.

Hi, I'm totally new to D3 and to this library. Thank you so much for sharing your code.
I would like to add data for nodes dynamicaly and I wonder if this is possible with d3-flextree - to recalculate/redraw tree after adding new child nodes?
Something like https://github.com/fhightower/d3-dynamic-tree
Thanks for any reply!

Discovered a bug in the layout algorithm -- see this issue. I added test trees grandkids1.json and grandkids2.json to illustrate it.

Can't get this library to work, keep getting the above error when trying to build it.

I found that custom spacing does not work (an example layout dump is pasted at the end). I can confirm that spacing accessor is called every time but somehow does not affect the 'y' coordinates. For example, with custom spacing 10, I expect 'y' in the following (the right most leaf in the paste below would be (320, 410) instead of (320, 400) -- and this recurses of course:

                     { size: [1260, 80],
                      x: 530, y: 320,
                      children: [
                        { size: [380, 80],
                          x: 530, y: 400 },
                      ],

I can work around the problem by including the spacing (I only need fixed spacing for now) in the size but it would be nice if this is something that you can quickly fix since you have much better knowledge on this. :-)

{ size: [620, 60], x: 0, y: 0, children: [ { size: [10, 40], x: 0, y: 60, children: [ { size: [620, 60], x: -570, y: 100, children: [ { size: [340, 60], x: -570, y: 160, children: [ { size: [10, 40], x: -570, y: 220, children: [ { size: [480, 60], x: -570, y: 260, children: [ { size: [740, 60], x: -570, y: 320, children: [ { size: [340, 80], x: -570, y: 380 }, ], }, ], }, ], }, ], }, ], }, { size: [700, 60], x: 530, y: 100, children: [ { size: [1200, 60], x: 530, y: 160, children: [ { size: [560, 60], x: 530, y: 220, children: [ { size: [10, 40], x: 530, y: 280, children: [ { size: [1260, 80], x: 530, y: 320, children: [ { size: [380, 80], x: 530, y: 400 }, ], }, ], }, ], }, ], }, ], }, ], }, ], },

As metioned in #6, d3 has released v4.0 and features modular library. I am happy to adapt this plugin to v4.0.

As the title suggest, for working with latest versions of webpack, the commit fe01568 is needed.

Thanks !

Hi,

Is it possible to flip tree top to bottom?

Thanks a lot.

Greetings to all.
I am currently working on producing TypeScript definitions for this library to be added to DefinitelyTypes.

https://github.com/m-gallesio/DefinitelyTyped/blob/master/types/d3-flextree/index.d.ts

If anyone is interested, I would appreciate this to be tested by someone who has direct experience with this library (I am doing this mostly to update type definitions for https://github.com/bumbeishvili/org-chart which uses this library).

Regards.

I just published two examples on Observable in case anyone is interested.

• Treemap as d3-flextree
• Simple Example

Just learning Observable, so I apologize if I did anything in a non-best-practice kind of way.

https://www.jsdelivr.com/projects/d3-flextree

Hi

Seems that when having children with different width, the calculated x positions are too far away. Or i don't get what i'm making wrong.

Here is a simple example. You can just copy&paste it in the npm runkit (https://npm.runkit.com/d3-flextree):

var d3Flextree = require("d3-flextree")
const flextree = d3Flextree.flextree;

const data = {
    "id": "26d536a3-879f-493c-af2e-3785a3e7bd5c",
    "size": [
        360,
        409
    ],
    "children": [
        {
            "id": "e7e369db-ffd7-4b1a-a7d4-42a6d157c35c",
            "size": [
                460,
                609
            ],
            "children": []
        },
        {
            "id": "6a91d13d-dc13-45b9-8697-d105a443ac03",
            "size": [
                1103,
                1298
            ],
            "children": []
        }
    ]
};


const layout = flextree();
const tree = layout.hierarchy(data);
layout(tree);
tree.each(node => console.log(`(${node.x}, ${node.y})`));

These are the computed x/y positions of each node (printed from the console.log):

"(0, 0)"
"(-551.5, 409)"
"(230, 409)"

The calculated distance between the 2 children is 321.5 ((-551.5 + 460 - 230) * -1), but should be almost 0 because i don't have defined any spacings.

Or am I wrong?

Thanks for your help

This tree with different node sizes like below makes overlapping!

const flextree = require('d3-flextree').flextree;
const layout = flextree();
const tree = layout.hierarchy({
id:1,
size: [1, 1],
children: [
{id:2, size: [2, 1], children: [ ]},
{id:3, size: [4, 1], children: [ ]},
{id:4, size: [1, 1], children: [ ]}
]
});
layout(tree);
tree.each(node => console.log((${node.x}, ${node.y})));

when we run this code, you can see calculate wrong X for nodes with id 2 and 3!
the result:

"(0, 0)"
"(-2.5, 1)"
"(0.5, 1)"
"(3, 1)"

the excepted result:

"(0, 0)"
"(-3, 1)"
"(-1, 1)"
"(3, 1)"

Hello,

I am working on implementing the d3 v4 tree in polymer. https://github.com/powerxhub/emh-d3-tree.git

The tree.nodeSize() takes a fixed array and not a function. https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_nodeSize This seems ripe for your implementation of the flextree.

Thank you,
Loren

Is it possible to change the license of this software to an OSI approved license like the "Unlicense"? https://choosealicense.com/licenses/unlicense/ https://unlicense.org/

The current WTFPL license is very vague does not include mentions regarding liability, warranty and public domain and isn't court tested, which is why my company is hesitant to actually use code licensed under it and it could also potentially be problematic for you as author. The Unlicense has all of the same freedoms that you seem to want from the WTFPL, but fixes the problems I mentioned above.

I love the concept of variable size in the d3 tree layout, I'm trying to use it in a webpack environment. First I'm not sure if there is d3-flextree npm package and it seems like I couldn't run the npm install d3-flextree, then I tried to import the file directly, my first attempt is to import the dist/d3-flextree and I got d3 couldn't be found error, then I tried to import the /d3/d3.min.js, and I got another error: Uncaught TypeError: Cannot read property 'document' of undefined. Is there any way to use it in the webpack?

Thanks!

Hello,

I am trying to implement an "horizontal" flextree layout. So far so good, after I switched some x and y coordinates. I would like to add some extra separation between the parent nodes and the children nodes. So I introduced the spacing parameter. It looks to me, that this adds only spacing between the siblings, not between the tree levels.

This is how my chart looks like with spacing 0.

This is how my chart looks like with spacing 50.

In the flextree example it looks like the spacing is only between the "sibling" nodes. How can I achieve extra tree-level spacing without introducing some opaque container workaround ?

Hello,

thanks for providing this package!

Is it also possible to create a horizontal tree?

Best

When utilise CRA / Webpack in my project I am not able to compile it properly.

Everything works fine with my React build and this package is amazing, but I am forced now to utilise d3-flextree-v4 because that package has been exported as an es5 module

Documentation about CRA error.
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

@Klortho By the way I cannot express how grateful I am for this javascript port this opens so much UX/UI possibilities.

Not sure if anyone is actively managing this but is there any known reference for having the layout change for any nodes that have a certain number of children?

I have all my nodes in a tree structure but for visual purposes, I want to have children nodes be displayed in columns of two as opposed to one long row. Not sure if anyone using this library has had similar interests/issues like this.

As it stands, flextree seems to return centered coordinates. It would be more keeping with the other d3-hierarchy style layouts if it instead returned coordinates that started from 0,0 (including the width and height of the calculated nodes). If this is an option or I shouldn't be seeing negative x values, let me know.