Javascript D3-以百分比形式显示x值数据刻度

有一个折线图，如下所示： 希望x轴在每个刻度后显示一个&符号，10%，20%，等等。如何做到这一点

我读过一种可以使用的格式方法，也看到人们使用数学并实际进行转换，但我想肯定有一种快速方法可以在每个勾号后添加字符串%

这里使用D3的V4

    <script>
        // set the dimensions and margins of the graph
        const formatPercent = d3.format(".0%")
        const margin = {top: 20, right: 30, bottom: 60, left: 250},
            width = 1000 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;
        
        // append the svg object to the body of the page
        const svg = d3.select(".line")
          .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");
        
        // Parse the Data
        d3.json("./data/linedata.json", function(data) {
        
          // Add X axis
          const x = d3.scaleLinear()
            .domain([0, 100])
            .range([ 0, width]);
          svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x))
            .selectAll("text").attr('class', 'xaxis')
              .attr("transform", "translate(0,0 )")
              
              .style("text-anchor", "end");
        
          // Y axis
          const y = d3.scaleBand()
            .range([ 0, height ])
            .domain(data.map(function(d) { return d.desc; }))
            .padding(.1)
          svg.append("g").attr('class', 'xaxis')
            .call(d3.axisLeft(y))
        
          //Bars
          svg.selectAll("myRect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", x(0) )
            .attr("y", function(d) { return y(d.desc); })
            .attr("width", function(d) { return x(d.total); })
            .attr("height", y.bandwidth() )
            .attr("fill", "#008080")
        
        })
        
        </script>

//设置图形的尺寸和边距
常量formatPercent=d3.format（“.0%”）
常量边距={top:20，right:30，bottom:60，left:250}，
宽度=1000-margin.left-margin.right，
高度=300-margin.top-margin.bottom；
//将svg对象附加到页面主体
常量svg=d3。选择（“.line”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//解析数据
d3.json（“./data/linedata.json”），函数（数据）{
//添加X轴
常数x=d3.scaleLinear（）
.domain（[01100]）
.范围（[0，宽度]）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
.selectAll（“text”）.attr（'class'，'xaxis'））
.attr（“转换”、“转换（0,0）”）
.样式（“文本锚定”、“结束”）；
//Y轴
常量y=d3.scaleBand（）
.范围（[0，高度]）
.domain（data.map（函数（d）{return d.desc；}））
.padding（.1）
svg.append（“g”）.attr（'class'，'xaxis'）
.呼叫（d3.左（y））
//栅栏
svg.selectAll（“myRect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，x（0））
.attr（“y”，函数（d）{返回y（d.desc）；}）
.attr（“宽度”，函数（d）{返回x（d.total）；}）
.attr（“高度”，y.带宽（））
.attr（“填充”，“#008080”）
})

您是否尝试过使用tickFormat功能？ 像这样的方法应该会奏效：

.tickFormat（d=>d+“%”）