D3角度グラフの軸は

Question

が、私はここにplunkerを持っているラベル。

軸にラベルを追加するにはどうすればよいですか。

これは、軸にlablesを追加すると考えました。

private drawAxis() { 
    this.g.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + this.height + ")") 
     .call(d3.axisBottom(this.x)) 
     .classed('x axis', true) 
     .call(this.x) 
     .append('text') 
     .attr("transform", 
      "translate(" + (this.width/2) + " ," + 
      (this.height + this.margin.top + 20) + ")") 
     .style("text-anchor", "middle") 
     .text("Letters"); 
    this.g.append("g") 
     .attr("class", "axis axis--y") 
     .call(d3.axisLeft(this.y).ticks(10, "%")) 
     .append("text") 
     .attr("class", "axis-title") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", "0.71em") 
     .attr("text-anchor", "end") 
     .text("Frequency"); 
} 

Answer 1

あなたの変換ルールはあまりにも遠く、それを押し下げているので、あなたのx軸ラベルが表示されていません。それはすでにtranslate(0, this.height)の変換を持つグループ内にあるので、追加の25ピクセル程度しかプッシュする必要はありません。

あなたは、どちらかstyle('fill','black')を言って、あなたのコードに行を追加するか、あなたのスタイルシート.axis-title { fill: black }にテキストエレメントの塗りを定義する必要があるかもしれません（同様にあなたのx軸ラベルにaxis-titleのクラスを追加することを忘れないでください） 。