D3.js d3水平条形图，背景和最大值为100%

我有这个单条横条形图，我想做以下调整：

在条形图右侧显示刻度值，而不是按轴显示

显示条形图比例的背景，而不是左轴和下轴

当前版本：

我想了解的内容：

JS

var data = [
      {"yAxis":"score", "xAxis":"72"}
    ];          
    // set the dimensions and margins of the graph
    var margin = {top: 20, right: 20, bottom: 30, left: 80},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;          
    // set the ranges
    var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.4);
    var x = d3.scaleLinear()
    .range([0, width]);          
    var svg = d3.select(".barChartContainer").append("svg")          
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "0 0 960 500")
    .append("g")
    .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");        
    // Scale the range of the data in the domains
    x.domain([0, d3.max(data, function(d){ return d.xAxis; })])
    y.domain(data.map(function(d) { return d.yAxis; }));        
    //y.domain([0, d3.max(data, function(d) { return d.prereqs; })]);
    // append the rectangles for the bar chart
    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")          
    .attr("y", function(d) { return y(d.yAxis); })
    .attr("height", y.bandwidth())
    .transition()
    .duration(1000)
    .delay(function(d, i) {
    return i * 100
    })
    .attr("width", function(d) {return x(d.xAxis); } );
    // add the x Axis
    svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickValues(d3.range(x.domain()[0], x.domain()[1] + 1, 1))
    .tickFormat(d3.format("d"))
    );
    svg.append("g")
    .attr("class", "yAxis")
    .call(d3.axisLeft(y));

我从一个密码笔里得到了这个代码，我一直在尝试修改它，但它一直在崩溃，所以我停下来，希望你能帮我

---

谢谢。

要显示条形图的背景，只需复制您的选择，并为矩形选择100%的值，以浅灰色填充：

var backgroundBar = svg.selectAll(null)
    .data(data)
    .enter()
    .append("rect")
    //etc...
    .attr("width", function(d) {
        return x(100);
    });

当然，您必须更改x比例的域：

var x = d3.scaleLinear()
    .domain([0, 100]);

然后，放下两个轴并使用文本选择打印标签

最后，对值使用另一个文本选择：

var values = svg.selectAll(null)
    .data(data)
    .enter()
    .append("text")
    //etc...
    .text(function(d) {
        return +d.xAxis
    })

如果需要，您可以在文本之间：

.attrTween("text", function(d) {
    var self = this
    var i = d3.interpolateNumber(0, +d.xAxis);
    return function(t) {
        return d3.select(self).text(~~i(t));
    }
});

结果是：

var数据=[{
“yAxis”：“得分”，
“xAxis”：“72”
}];
var保证金={
前20名，
右:20,，
底数：30，
左：80
},
宽度=500-边距。左侧-边距。右侧，
高度=200-margin.top-margin.bottom；
变量y=d3.scaleBand（）
.范围（[高度，0]）
.填充（0.4）；
var x=d3.scaleLinear（）
.范围（[0，宽度]）
.域（[01100]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，500）
.attr（“高度”，200）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
y、 域（data.map）（函数（d）{
返回d.yAxis；
}));
var backgroundBar=svg.selectAll（空）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“填充”、“浅灰色”）
.attr（“y”，函数（d）{
返回y（d.yAxis）；
})
.attr（“高度”，y.带宽（））
.attr（“宽度”，函数（d）{
返回x（100）；
});
var bar=svg.selectAll（空）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“类”、“条”）
.attr（“y”，函数（d）{
返回y（d.yAxis）；
})
.attr（“高度”，y.带宽（））
.transition（）
.期限（2000年）
.延迟（功能（d，i）{
返回i*100
})
.attr（“宽度”，函数（d）{
返回x（d.xAxis）；
});
var labels=svg.selectAll（空）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“y”，函数（d）{
返回y（d.yAxis）+y.带宽（）/2；
})
.attr（“x”，-10）
.attr（“文本锚定”、“结束”）
.文本（功能（d）{
返回d.yAxis
});
var values=svg.selectAll（空）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“y”，函数（d）{
返回y（d.yAxis）+y.带宽（）/2；
})
.attr（“x”，10）
.文本（功能（d）{
返回+d.xAxis
})
.transition（）
.期限（2000年）
.延迟（功能（d，i）{
返回i*100
})
.attr（“x”，函数（d）{
返回x（d.xAxis）+10；
})
.attrTween（“文本”，函数（d）{
var self=这个
变量i=d3.插值枚举数（0，+d.xAxis）；
返回函数（t）{
返回d3.select（self）.text（~i（t））；
}
});
谢谢，如果你有时间的话，这是关于这个问题的另一个迭代：@Gerardo Furtado只是一个问题：为什么
在
空值上选择所有
？