2016-08-14 11 views
1

私はサークル内のテキストを折り返すのにD3plusを使用しようとしていましたが、成功しませんでした。私のアプリケーションでは、いくつかの円/テキストのペアを "g"要素にまとめました。私のコードでは、私は「グラム」の要素を作成し、私はこのようなd3plus d3plus.textwrap()関数を呼び出し、それに円やテキストを追加した後:代わりに包まれたばかりのD3とサークルの折り返しテキスト

d3plus.textwrap() 
    //selecting the first text element 
    .container(d3.select("#Text0")) 
    .draw(); 

ただし、テキストが簡単に消えます。テキストはDOMの要素として表示されますが、何らかの理由でそのサイズが0x0になります。誰がここで間違っているのか分かっていますか? 。。

+0

が(このコード 'd3plus.textwrap()コンテナ(d3.select( "#Text0"))(真の)サイズを変更 .drawを試してみてください)。 ' –

答えて

2

次のコードのように使う方法resize as true

<!DOCTYPE html> 
<meta charset="utf-8"> 
<script src="//d3plus.org/js/d3.js"></script> 
<script src="//d3plus.org/js/d3plus.js"></script> 
<style> 
    svg {font-family:"Helvetica","Arial",sans-serif;height: 425px;margin: 25px; width: 400px;} 
    .type {fill: #888;text-anchor: middle;} 
    .shape {fill: #eee;stroke: #ccc;} 
</style> 
<svg> 
    <circle class="shape" r="85px" cx="275px" cy="300px"></circle> 
    <text id="circleResize" class="wrap" y="260px" x="200px" font-size="12"> 
Appeared Text inside circle </text> 
</svg> 
<script> 
    d3plus.textwrap() 
.container(d3.select("#circleResize")) 
.resize(true) 
.draw(); 
</script> 
関連する問題