javascript - D3 组织结构图 - 显示用户详细信息

Question

基于我的 previous question 的回答，我能够创建一个公司组织结构图代码，目前看起来像 this

我想在搜索栏右侧的列中显示其他用户详细信息，例如电子邮件、电话、照片等(嵌入 abc2.json 文件中)as such

这是一个similar orgchart除了我希望详细信息显示在图表右侧而不是下方。
另外，我需要它来区分单击用户(显示详细信息)和单击节点(展开子项)，而不是在鼠标悬停时显示详细信息。

如何做到这一点？

Thanks

Answer 1

您可以为附加到节点的文本创建一个组，向该组添加点击监听器，并在填充详细信息后停止事件传播:

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();
}

这是您更新的插件:http://plnkr.co/edit/FQCegRgUGtqizwPRLBMP