0

Based on answers to my previous question, I was able to create a company organization chart code that currently looks like this

I'd like to display additional user details like email, phone, photo etc. (which are embedded in the abc2.json file) in column to right under search bar, as such

Here is a similar orgchart except I want details displayed to right of chart not below.
Also, instead of displaying details on mouse-hover, I need it to differentiate between clicking on user (to display details) vs clicking on node (to expand children).

How to do this ?

Thanks
Community
  • 1
  • 1
d-_-b
  • 761
  • 2
  • 11
  • 26

1 Answers1

1

You can create a group for the texts appended to the node, add click listener to this group and stop event propagation after populating the details:

var texts = nodeEnter.append('g')
            .on("click", userClick);
  // name
  texts.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".30em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

  // title
  texts.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", "1.5em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.title; })
      .style("fill-opacity", 1e-6);



function userClick(d) {
    $('#details').show();
    $('.name').text(d.name);
    $('.email').text(d.email);
    $('.phone').text(d.phone);
    d3.event.stopPropagation();
}

Here is your updated plunker: http://plnkr.co/edit/FQCegRgUGtqizwPRLBMP

Chirag Kothari
  • 1,390
  • 9
  • 19
  • That is great ! I see that once I click on details, it 'pushes' the chart down - see http://imgur.com/a/MMi2S - is it possible to decouple or disconnect the details 'frame' from the chart (maybe somehow in the css style) so they're displayed independently ? And is it also possible to display the user details when I search for them in search bar ? – d-_-b Aug 31 '16 at 16:50
  • 1
    yes, that can handled with css. Give it a try, there can be many possible solutions, try reducing the width of svg of example. – Chirag Kothari Aug 31 '16 at 16:57
  • Yep, that worked. Do you know how to make photo appear in details section ? If the json file contains image file name, can I add $('.photo').image(d.photo) property in the userClick function ? – d-_-b Aug 31 '16 at 18:59
  • i have a few more requirements.. would you be interested in working on this project for money, or gift cards ? i can send $50 worth amazon gc, paypal, bitcoin etc. I can pay first if that would make you comfortable. – d-_-b Sep 06 '16 at 23:34