Question

我这里有一个傻瓜 - https://plnkr.co/edit/MErMvIgG9MOdXmjBPZVq?p=preview

我认为这个D3拼图的最后一块。

如何在轴上添加标签。

我认为这会在轴上添加标签。

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 }中添加一行（不要忘记添加{{1}类1}}到你的x轴标签。）

D3角度图表轴标签

1 个答案: