4

D3（http://bost.ocks.org/mike/treemap/）でZoomable Treemapを実装していますが、クリックするとリーフrectがURLに移動するように変更しました。タイトルが長すぎる場合は、省略記号も追加されます。

代わりに、葉の四角形にワードラップを実装したいのですが、機能させることができません。テキストに一連のtspanを追加したかったのですが、実行順序に苦労しすぎて、どこに配置するかがわかりません。

コード：https ：//secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.htm

データ：https ：//secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.json

私はそれを分割するtspansか、テキストを含むdivが必要であることを調査しましたが、どちらの方法もわかりません。通常のD3ツリーマップのテキストラップの例がありますが、ズーム可能なツリーマップのテキストラップは見つかりませんでした。コードは大幅に異なります。

4

1 に答える 1

5

最も簡単な方法は、おそらくSVGtext要素をdiv内部のsに置き換えることforeignObjectです。そのためには、

g.append("text") //was text
 .attr("dy", ".75em")
 ...

と

g.append("foreignObject")
 .attr("dy", ".75em")
 ...
 .append("xhtml:div")
 ...

また、テキストが正しく流れるように、（テキストが長すぎるかどうかを判断するために使用しているものと同様のコードを使用して）の属性widthとheight属性を設定することをお勧めします。foreignObject

于 2013-01-16T16:09:48.613 に答える