2 
cells.append('rect')
      .attr('x', function (d) { return d.x; })
      .attr('y', function (d) { return d.y; })
      .attr('height', function (d) { return d.dy; })
      .attr('fill', function (d) { return d.children ? null : color(d.parent.name); })

cells.append('text')
      .attr('x', function (d) { return d.x + d.dx / 2 })
      .attr('y', function (d) { return d.y + d.dy / 2 })
      .attr('fill', 'white')
      .attr('font-size', 14)
      .text(function (d) {
         if (d.name.length < cells.rect.width) {
              return d.name;
         }
       });

どうしてか分かりません

cells.rect.width

動作しませんか？しかし、私が知りたいのは、図形にテキストを追加する前に、図形の幅を確認する方法です。

また、形状の幅を配列にプッシュしてから、インデックス ループを使用して配列をループし、名前の長さがボックスの幅よりも長いかどうかを確認しました。それに関する問題は、形状が作成されるときに、最大の面積を持つ形状 (ボックス) が最初に作成されることです。一方、テキストが追加されるときは、右下から左上に向かって開始されます。

テキストの長さとピクセルが 2 つの異なる単位であることは理解していますが、単純な比率に変換して入れます。画面に既に描画されている四角形の幅を取得するにはどうすればよいですか?

4

2 に答える 2

5

要素 ( this) とその要素を使用しbboxて、実際の幅を取得できます。ただし、文字数をピクセル単位の幅と比較しているため、これは思い通りには機能しません。機能させるには、最初にテキストを描画してから、幅と比較して幅を確認し、rect大きすぎる場合は削除する必要があります。

このためのコード (rectとテキストを描画した後) は、次のようになります。

cells.selectAll("text")
     .text(function(d, i) {
       if(this.getBBox().width <
               document.querySelectorAll("svg > rect")[i].getBBox.width) {
         return d.name;
       }
     });
于 2013-07-03T13:38:37.150 に答える
3

rect オブジェクトには属性の子が含まれています。

cells.rect.attributes.width.value

代わりに機能する可能性があります。

于 2015-02-01T14:53:09.560 に答える