2

我一直在努力从 d3 节点获取标签的宽度和高度。我在节点上有一个图标，它将切换一个子图。但我需要根据标签的大小动态设置节点的宽度和高度。一旦我得到标签的宽度，我就可以为图标腾出空间。标签尺寸可能会改变，所以我需要知道宽度。这是我所拥有的，我正在使用 dagre-d3 来定位和渲染节点：

 nodes = [
   {id: 1, shape: "diamond", label: "Start"}
  ]

 for (var i = 0; i < nodes.length; i++) {
    g.setNode(nodes[i].id, {
     label: nodes[i].label
      width: // I want to set the width here based on the width of the   label
    });
}

非常感谢任何帮助。如果需要，很高兴显示更多代码。

更新：

这是我为获取每个节点的文本所做的工作：

 svgGroup.selectAll("tspan").each(function (object:any) {

      object = parseInt(object, 10) // gives me the id of each node
      var nodeObject = g.node(object); // get the full node 
      var length = this.getComputedTextLength();
      for (var i = 0; i < nodes.length; i++) {
                if (node[i].id === object) {
                     // add the node label width to the nodes array
                     nodes[i].labelWidth = length; 
                  }
          }
 }

以上允许我根据标签+切换图标设置节点的宽度。我遇到的一个问题是，如果一个节点有一个子图，我注意到“svgGroup.selectAll(“tspan”)”只是获取顶级节点。例如，我的节点如下所示：

  this.nodes = [

      {id: 1, shape: "ellipse", label: "start", 
         subGraph: {
               nodes = [
                    {id: 10, shape: "ellipse", label: "SubNode1"},
                    {id: 11, shape: "ellipse", label: "SubNode2"}
                ],
                edges = [
                     {from: 10, to: 11, type: "vee", label: ""}
                 ]
              }
           },
      {id: 2, shape: "rect", label: "Square"}
  ]

“svgGroup.selectAll”语句仅获取 id 1 和 id 2 的顶部节点的 tspan。有没有办法获取 id 10 和 id 11 的子图节点的 tspan。因为 id 10 或 11 可能有一个subGraph 嵌套在其中，如果是这种情况，我还需要获取这些节点的标签宽度。

4

0 回答 0