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

这是您更新的plunker：http://plnkr.co/edit/FQCegRgUGtqizwPRLBMP

D3 orgchart - 显示用户详细信息

1 个答案: