family-tree | An example app that lets you create a family tree | Frontend Framework library

I'm in the process of creating a family-tree using D3. My dataset is indeed hierarchical, but the root node of the tree is the child. Each "child node" contains two "parent" nodes that represents each childs two parents. Here is an example of my data.

I have an iFrame using some js to enable scrolling within an Advanced iFrame that auto resizes the frame.

My issue is that while the code below works well, it scrolls too far. It doesn't take account for my menu bar which is 60px high.

Issue can be seen here https://www.rosentreter.website/family-tree/ after selecting an alphabet letter.

How can I modify the code top.offset to reduce it by 60px? I've tried everything...

Using the library jquery-1.7.2.min, my code is as follows:

I am trying to pull in and parse a JSON from the Yelp fusion API. Whenever I pull it in and try to parse it and store it as a struct, I get the following error:

I am new to Angular 6 and I do not know how to use npm i d3-dtree in Angular 6. How can I use Javascript libraries using npm, especially for Angular 6?

I want to create family-tree like this fiddle using d3-dtree. Can anyone give me guide or demo how to use d3-dtree with npm in StackBlitz's link?

I have a customized version of D3 based family tree. The only difference is, instead of using rect nodes I chose to use foreignObject.

I would like the foreignObjects to be on the top of other path layer so that they do not overlap, but as you see from the sample code linked below, we still see the path lines above the html elements. Based on the google search, things I tried were changing document order, select("selector").raise(), setting z-index, and block inline notation on css, but nothing changes at all. Could anyone help with this.

sample code

I have a binary tree that I want to convert to a nested HTML unordered list.

I have a function I am trying to modify to do the task.

I am trying the following method (run snippet for output):

This method is in the BinaryTreeClass

I want to create a tree diagram with multiple parents. The idea is to create a diagram for Dota 2 Items, which several items can be made into one single item (plus a recipe), AND/OR one item can be made into several possibilities (more than one parent item).

One of my reference is from thecodeplayer's code.

Here is my work on jsfiddle so far.

I am trying to create two D3 trees with what appears to be a share central root. The trees should expand to the right and left as the user clicks on my nodes.
I came across an example here on stackoverflow.

Here is the link to that SO: Tree with children towards multiple side in d3.js (similar to family tree)

I even put together a bl.ocks.org version of this code here: https://bl.ocks.org/redcricket/de324f83aa6c84db2588c1a1f53cc5e3

The above examples are D3 v3. I am adapting the above example to D3 v4 and integrating it into an angular component, but I have run into a problem in that I can only display only one tree at a time.

The entry point into my code is this angular component and its service component:

The component:

In the front end, I want the user to be able to change the outcome of a Decision Tree depending on his choice.

I am building a Django-React App, and for the decision tree I have used thecodeplayer's style and tree example. http://thecodeplayer.com/walkthrough/css3-family-tree

I need to create an unordered list, which will be plotted as a decision tree.

The user can choose between 4 options, name Option 1,2,3 and 4. And those should change the style of the decision tree to help the user visualize. Like if the user selects in a combobox Option 1, I would like the Option 1 box to be displayed with another color. And, ultimately, it would be great if there is a way to highlight all the path from the parent until the selected leaf.