D3 tree with context menu on various levels

Download source code – D3 Tree using HTML

Download source code – D3 Tree Using Angular 2/4 

 

Step 1: Creating html file to display the D3 Tree

From the example given get the Javascript libraries and Stylessheets.

d3chart.html

Step 2: Sample data in json file

sampledata.json

Step 3: Modify the tree_collapsible.js to create new context menu

In the function treeCollapsible( ) do the following changes to create context menu for different levels.

  • After declaring d3Container variable,  create context menu as follows

  • After diagonal projection get Json file data using Ajax.
  • Now group names as per the levels. from the below code groupNames[] will have level 1 and memeberNames[] will have level 2.
  • And root node is assigned to the root variable as root = treeData[0];

Output:

 


How to use this D3 Tree in angular 2/4 ?This is the place where Typescript Ambients comes into picture.

What is Ambients ?

Ambient Declaration is the process of providing declarations for user javascript as well as for javascript third party libraries. Third party libraries can be either JQuery, AngularJS, Node JS, Require JS, Polymer JS etc.

  • Developer no need to rewrite the third party bundles. We can just make use of them in typescript with type-safe.
  • It enables Intellisense  feature for third party bundles of all the variables and its methods.
  • Ambient declarations will have an extension (.d.ts), where‘d’ denotes the declaration.                                         Ex: sample.jssample.d.ts
  • It’s not mandatory that declarations must be in a declaration file with extension (.d.ts) it can be either in (.ts / .d.ts), but it’s recommended to separate the declarations in a separate file.
  • If a file has the extension.d.ts then each root level definition must have the declare keyword prefixed to it, so that the programmer can make sure that declared items will exist at run time

Ex:

Step 1: Let’s Assume we have a javascript file sample.js

File: Sample.js

Now we need to modify this sample.js as follows

Step 2: Create declaration file for sample.js

File: sample.d.ts

Step 3: Provide reference of declaration file sample.d.ts in the component

 


Now similary we need to modify the file tree_collapsible.js from the above example.

Step 1: Modify the tree_collapsible.js. And change the path of the sampledata.json

Step 2: Creating declaration  file as follows tree_collapsible.d.ts

Step 3: Provide reference for declaration file in the component. We need to load the function with in ngAfterViewInit( ). 

Reason behind this is before initializing the component template if we load the function, D3 component would not be able to find the element that is required to draw SVG.

 

Step 4: Create template for Component

File: template.html

Step 5: Provide references of the required files for D3 Tree in the main HTML page.

File: src/Index.html

Note: You will get the same output. If not check if any errors in browser console window. Errors mostly will be file not found. If that is the issue please give the relevant path.

51 thoughts to “D3 tree with context menu on various levels”

  1. Hi, thanks for your sample application. I forked it and put them in Angular5(Angular-cli framework). I compiled it successfully, but it couldn’t load the page to display the tree.
    I debugged for a long time. I noticed it could be some problem with path. But, I still could not fix the bug. Could you please let me know where is the trouble about it? or give me some hints to merge your source into Angular5.

    your basic function can really help me. I really appreciate that you can give me some advice.
    thanks very much !

    ps: here is my package.json as below:
    {
    “name”: “ngd3tree”,
    “version”: “0.0.0”,
    “license”: “MIT”,
    “scripts”: {
    “ng”: “ng”,
    “start”: “ng serve”,
    “build”: “ng build –prod”,
    “test”: “ng test”,
    “lint”: “ng lint”,
    “e2e”: “ng e2e”
    },
    “private”: true,
    “dependencies”: {
    “@angular/animations”: “^5.2.0”,
    “@angular/common”: “^5.2.0”,
    “@angular/compiler”: “^5.2.0”,
    “@angular/core”: “^5.2.0”,
    “@angular/forms”: “^5.2.0”,
    “@angular/http”: “^5.2.0”,
    “@angular/platform-browser”: “^5.2.0”,
    “@angular/platform-browser-dynamic”: “^5.2.0”,
    “@angular/router”: “^5.2.0”,
    “core-js”: “^2.4.1”,
    “rxjs”: “^5.5.6”,
    “zone.js”: “^0.8.19”
    },
    “devDependencies”: {
    “@angular/cli”: “1.6.7”,
    “@angular/compiler-cli”: “^5.2.0”,
    “@angular/language-service”: “^5.2.0”,
    “@types/jasmine”: “~2.8.3”,
    “@types/jasminewd2”: “~2.0.2”,
    “@types/node”: “~6.0.60”,
    “codelyzer”: “^4.0.1”,
    “jasmine-core”: “~2.8.0”,
    “jasmine-spec-reporter”: “~4.2.1”,
    “karma”: “~2.0.0”,
    “karma-chrome-launcher”: “~2.2.0”,
    “karma-coverage-istanbul-reporter”: “^1.2.1”,
    “karma-jasmine”: “~1.1.0”,
    “karma-jasmine-html-reporter”: “^0.2.2”,
    “protractor”: “~5.1.2”,
    “ts-node”: “~4.1.0”,
    “tslint”: “~5.9.1”,
    “typescript”: “~2.5.3”
    }
    }

  2. I think the admin of this web site is genuinely working hard in favor of his site,
    since here every material is quality based material.

    1. Thanks for supporting us 4 HEAD EMBROIDERY MACHINE PRICE. Your comments means a lot to show more results with much efforts from us.

  3. This is the right blog for everyone who wishes to understand this topic.
    You realize so much its almost hard to argue with you (not that
    I personally would want to…HaHa). You certainly put a brand new spin on a topic that’s
    been written about for years. Great stuff, just wonderful!

    1. Thank you andis detachable blade clippers for supporting us. Sure we will come up with more articles. Your comment petals make the flower more stronger. 🙂

  4. My programmer is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the expenses.But he’s tryiong
    none the less. I’vebeen using Movable-type on numerous websites for about a year and am worried about switching to another platform.
    I have heard fantastic things about blogengine.net.
    Is there a way I can transfer all my wordpress posts
    into it? Any kind of help would be greatly appreciated!

    1. Hi private-proxies,
      Ofcourse migrating from PHP to DotNet might be a little harder for PHP guys, but nothing is impossible with good efforts. I’m experienced developer in Dot Net platform. I can help you guys in learning Dot Net if needed. If needed any help in learning DotNet drop an email to tekkemphani@gmail.com

      Q: Is there a way I can transfer all wordpress posts to DotNet?
      A: I hope direct conversion is not possible, I suggest you to learn DotNet. There are some techniques how you can migrate to dotnet from PHP. Migrating to new platform is always a good thing, because people can survive any where.
      https://msdn.microsoft.com/en-us/library/aa479002.aspx
      https://www.hanselman.com/blog/PeachpieOpenSourcePHPCompilerToNETAndWordPressUnderASPNETCore.aspx

  5. What’s up, I read your blog like every week. Your humoristic style is witty, keep doing what you’re doing!

  6. There is certainly a great deal to find out about this subject.
    I really like all of the points you have made.

  7. Very good information. Lucky me I discovered your site by chance (stumbleupon).
    I’ve book marked it for later!

  8. Asking questions are really nice thing if you are not understanding something
    completely, except this piece of writing offers fastidious understanding even.

  9. That is really fascinating, You are an excessively professional blogger.
    I have joined your feed and sit up for seeking more of your fantastic post.
    Additionally, I’ve shareed your site in my social networks

    1. Thanks for supporting buy anonymous proxies. And that’s really awesome in sharing useful content to your know people. If any one want to share your knowledge to the world in any technology please let me know.

  10. I’ve been browsing online greater than 3 hours as of
    late, yet I by no means found any fascinating article like yours.
    It is lovely price enough for me. In my opinion, if all web owners and bloggers made excellent content as you did, the internet might be much more useful than ever before.

  11. Hi there would you mind sharing which blog platform you’re using?
    I’m looking to start my own blog in the near future but I’m having a hard time making a decision between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most blogs and I’m looking for something unique.
    P.S Sorry for getting off-topic but I had to ask!

  12. magnificent publish, very informative. I ponder why the
    other specialists of this sector do not notice this. You should proceed your
    writing. I’m sure, you’ve a huge readers’ base already!

  13. Hi! This is kind of off topic but I need some help from an established blog.
    Is it very difficult to set up your own blog? I’mnot
    very techincal but I can figure things out pretty quick. I’m thinking about
    creating my own but I’m not sure where too begin. Do you have anny tips or suggestions?
    Thanks

  14. We’re a group of volunteers and opening a new scheme
    in our community. Your site provided us with valuable information to work on. You’ve done a formidable job and our entire neighborhood shall be grateful to
    you.

  15. I have been browsing online more than 3 houurs today, yet I never found any interesting
    article like yours. It’s pretty worth enough for me.
    In my view, if all site owners and bloggers made good content as you
    did, the internet will bee much more useful than ever before.

  16. Hello There. I found your blog using msn. This is a
    very well written article. I will be sure to bookmark it and come back to read more of your useful info.

    Thanks for the post. I will certainly return.

  17. Hey I know this is off topic but I was wondering if you knew of any widgets
    I could add to my blog that automatically tweet my newest
    twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something
    like this. Please let me know if you run into anything. I truly
    enjoy reading your blog and I look forward to your new updates.

  18. Hi there very cool site!! Man .. Beautiful .. Amazing ..
    I will bookmark your site and take the feeds also?
    I am satisfied to find numerous useful iinfo here in the post, we’d like work out more techniques
    in this regard, thank you for sharing. . . . .
    .

  19. I don’t even know how I ended up right here, but I believed
    this publish used to be great. I don’t realize who you might
    be however definitely you are going to a famous blogger for those who aren’t already.
    Cheers!

  20. May I just say what a relief to uncover somebody who actually knows what they are
    talking about on the net. You certainly know how to bring
    a problem to light and make it important. More people ought to check this out and understand this side of your story.
    I can’t believe you are not more popular because you surely possess the gift.

  21. Thank you for every other informative website. Where else could I am getting that type of information written in such a perfect approach?
    I’ve a venture that I am simply now operating on, and I have been on the glance out for such information.

  22. Wow, incredible blog structure! How long have you ever
    been running a blog for? you make running a blog glance easy.
    The total look of your site is magnificent, let
    alone the content!

  23. We absolutely love your blog and find the majority of your post’s to be
    precisely what I’m looking for. Would you offer guest writers to write content for you?
    I wouldn’t mind creating a post or elaborating on a lot of the subjects you write with
    regards to here. Again, awesome blog!

Leave a Reply

Your email address will not be published. Required fields are marked *