2016-04-24 14 views
0

d3.jsを使用して単純な棒グラフを作成していて、うまくいきます。 しかし、各バーにテキストを表示しようとすると、何も起こりません。コンソールはエラーを返さないため、問題を理解できません。 私のコードが利用可能ですhere、私は "Hello"のような単純なテキストを表示しようとしましたが、まだ何も表示されません。d3.js棒グラフ:.textが表示されない

+0

テキストはどこに表示されますか、そしてバーにはどのような価値がありますか? –

+0

私は各バーの最後に空き(freqData変数の属性)の値を表示したいと思います。 – cecelia

+0

このチュートリアルを試してみましたか:http://alignedleft.com/tutorials/d3/making-a-bar-chart?このチュートリアルでは、横のチャートではなく縦のチャートがあることがわかりましたが、まだ役立つことを願っています。 'rect'ではselectAllで、' text'ではselectAllではなく、テキストラベルを適用しようとしています。 –

答えて

0

問題:

SVGでrect要素にテキストを追加は。

ソリューション:

はSVGまたはグループにテキストを追加します。

指示:あなたは長方形にあなたの文章を追加している

。表示するエラーはないため、コンソールにエラーとして表示されるものはありませんが、テキストは表示されません。

あなたはテキストの変数を作成する必要があります。その後、

var texts = svg.selectAll(".mytexts") 
          .data(data) 
          .enter() 
          .append("text"); 

と属性を設定:

texts.attr("class", "value") 
       .attr("x", function(d) { return widthScale(d.vacant); }) 
       .attr("y", heightScale.rangeBand()/2) 
       .attr("dx", -3) 
       .attr("dy", ".35em") 
       .attr("text-anchor", "end") 
       .text(function(d) { return format(d.vacant); }); 

はそれに応じてCSSを変更することを忘れないでください。

+0

非常に良い説明!!!!感謝万円! すべてが動作していますが、テキストをrect変数とsvgにリンクする方法を理解できませんでした。 – cecelia

+0

心配はいりません!テキストを四角形にリンクするには、グループを作成するのが最善の方法です(要素はsvgにあります)。 –