具有属性的 D3 可折叠树答案

【问题标题】：D3 collapsible tree with attributes具有属性的 D3 可折叠树
【发布时间】：2020-01-02 17:08:37
【问题描述】：

在这个位置查看我的代码：https://codepen.io/tbellmer/pen/wvBPapB

enter code here

我创建了一个 D3 可折叠树，现在想将鼠标悬停属性放置在显示屏左上角的浅灰色矩形中。

但是，我做错了，因为我无法写出“你好！”作为文本到第 673 行的该区域。目标是当我将鼠标悬停在该节点的圆圈上时，将名称，城市，州，邮编，电话等属性显示到该浅灰色区域。看起来很简单，但我正在努力寻求帮助。

【问题讨论】：

标签： d3.js

【解决方案1】：

您正在尝试将 text 节点附加到 rect 节点。这行不通。相反，您可以将两者都附加到包含 g

let infoG = svg.append('g')

let info = infoG.append('rect')
  .attr('x', -150)
  .attr('y', 10)
  .attr('width', 150)
  .attr('height', 200)
  .attr('fill', 'lightgray');

  infoG.append('text')
    .attr('x', 5)
    .attr('y', 10)
    .text('Hello!');

【讨论】：