如何使用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) => echelleX(d.word))

要

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

我得到了这个，这更好，但轴的标签仍然不匹配。

我检查了d3.scaleBand的文档并尝试了一些调整，但我似乎无法按照我想要的方式工作。我错过了什么？我希望每个栏（d.freq）在轴下方都有相应的标签（d.word）。

Answer 1

带尺度是序数而不是线性，这意味着您需要为域提供每个可能的值，而不仅仅是最小值/最大值。 D3不能插入序数值。

试试这个

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

您还必须恢复对x attr所做的更改，乐队规模应该照顾到这一点。

编辑：错误地认为d3.map做了与数组映射相同的事情。