javascript - D3 orgchart-显示用户详细信息

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

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

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

这个怎么做 ？

Thanks

最佳答案

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

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

关于javascript - D3 orgchart-显示用户详细信息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39235077/