如何使用d3.js中的单词标记我的轴

我想做一个条形图，每个条形代表某个单词的频率

我的数据是一个对象数组，每个对象都有属性

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))

到

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

---

我查看了d3.scaleBand的文档，并尝试了一些调整，但似乎无法按我希望的方式工作。我错过了什么？我希望每个条形（

d.freq

）在其下方的轴上都有相应的标签（

d.word

）。

频带比例是有序的，而不是线性的，这意味着您需要向域提供所有可能的值，而不仅仅是最小值/最大值。D3无法插入有序值

试试这个

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

您还必须恢复您对

x

attr所做的更改，波段刻度应考虑到这一点

---

编辑：错误地认为是d3。map与array map做了相同的事情。

因此您的解决方案没有真正起作用，没有显示任何条形图。我不得不使用这个：

.domain（d3.set（data.map（function（d）{return d.word；}））.values（））

问题是，我从网上找到的另一个示例复制了这段代码，但不知道为什么它会起作用。你能解释一下原因吗？使用

data.map

和

d3.set（data.map[…]）

之间的区别是什么？我可能错过了一些小东西，但我所说的顺序刻度是正确的，如果您使用适当的数据创建一个JSFIDLE，我将很乐意向您展示如何操作。唯一的区别是，

set

返回唯一的值，但是您的原始数据无论如何都不应该包含重复的值。很抱歉，我的回答太晚了@Eric Guan，我刚回到我的计算机。这里有一个JSFIDLE：我的错误是，认为d3.map和array.map是一样的。

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