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

上記により、ラベル + トグル アイコンに基づいてノードの幅を設定できます。私が抱えている1つの問題は、ノードにサブグラフがある場合、「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 の subGraph ノードの tspan を取得する方法はありますか?その中にネストされたsubGraph。その場合、それらのノードのラベル幅も取得する必要があります。

4

0 に答える 0