d3.jsの単語を使用して軸にラベルを付ける方法

Question

棒グラフを作成したいと思います。すべての棒は特定の単語の頻度を表します。

私のデータはオブジェクトの配列であり、それぞれのプロパティはwordとfreqです。

私はそのように私の軸を宣言：

let echelleX = d3.scaleBand() 
     .domain(d3.extent(data, d => d.word)) 
     .range([marges.left, width - marges.right]) 
     .padding(0.1); 

そしてそれを呼んだ：

 svg.append("g") 
     .attr("class","axeX") 
     .attr("transform", `translate(0,${height})`) 
     .call(axeX) 
     .selectAll("text") 
     .attr("font-weight", "normal") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", ".5em") 
     .attr("transform", "rotate(-65)"); 

私は、SVGに自分のバーを追加：

svg.append("g").selectAll(".barre").data(data).enter() 
    .append("rect") 
    .attr("class", "barre") 
    .attr("x", (d,i) => echelleX(d.word)) 
    .attr("y", (d) => echelleY(d.freq)) 
    .attr("width", 2.5) 
    .attr("height", d => height - echelleY(d.freq)) 
    .attr("fill","steelblue"); 

しかし、結果はこれです：

私は

.attr("x", (d,i) => marges.left + i*3) 

に次の行

.attr("x", (d,i) => echelleX(d.word)) 

を変更すると、私は優れている、これを得るが、軸のラベルがまだ一致していません。

私はd3.scaleBandのドキュメントをチェックし、いくつかの調整を試みたが、私はそれは私がしたいと思うように動作させるように見えることはできません。私は何が欠けていますか？すべてのバー（d.freq）の軸の下に対応するラベル（d.word）が表示されます。

Answer 1

帯域幅は線形ではなく序数であり、最小/最大ではなくすべての可能な値をドメインに提供する必要があることを意味します。 D3は序数を補間できません。

この

.domain(data.map(d => d.word)) 

をお試しくださいまた、バンドのスケールはそれの世話をする必要があり、あなたがxのattrに行われた変更を元に戻す必要があります。

EDIT：思考の間違いをしましたd3.mapはアレイマップと同じことをしました。