1

D3で棒グラフを描きました。x 軸の値を下に、y の値をバー自体に表示したいと考えています。

何らかの奇妙な理由で、ラベルが表示されません。

このフィドルを見ることができる人なら誰でも感謝します。

最後の関連セクション

// why isnt this showing ??? <-------------------------- right here
// price tags on the bars
svg.selectAll("text")
 .data(y)
 .enter()
 .append("text")
 .text(function(d ,i) { return Math.round(y[i]).toLocaleString() ;}) 
 .attr("y" , function(d) { return height - yscale(d);})
 .attr("x" , function(d, i) { return i * (bar_width + spacing) + bar_width / 4})
 .classed("analysis-result-label" , true);
4

1 に答える 1

1

データの選択と照合の方法が原因で、ラベルが表示されていません。を呼び出すたび.data()に、D3 は、前の手順で行った選択の内容と、引数として渡すデータを照合します。text2 番目のラベルのセットでは、要素を選択しています。この選択には、直前に追加した要素が含まれます。各データ項目には一致する DOM 要素があるため、.enter()選択は空になります。したがって、何も追加されません。

この問題を回避する最も簡単な方法はtext、選択範囲内の要素に既に割り当てているクラスを使用することです。あれは、

svg.selectAll("text")

になるだろう

svg.selectAll("text.analysis-result-label")

つまり、2 番目の選択はtext要素が存在するため空になりますが、その特定のクラスではなく、コードの残りの部分は期待どおりに機能します。

ここでjsfiddle を完成させてください。

于 2013-09-07T15:42:31.117 に答える