d3 v4 - 在单个水平条形图的左侧有值

Question

下面的

是当前形式的水平条形图的代码。我想将值移动到条形图的左侧。我试过了.attr("text-anchor", "start")，但它没有用。任何帮助表示赞赏，希望您能提供一些注释，以帮助解释格式化标签/值的一些原则。谢谢！

var data = [{        
    "xAxis": "72.1"
    }];
    var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 80
    },
    width = 500 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;
    var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.4);
    var x = d3.scaleLinear()
    .range([0, width])
    .domain([0, 100]);
    var svg = d3.select(".barChartContainer").append("svg")
    .attr("width", 500)
    .attr("height", 200)
    .append("g")
    .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");
    y.domain(data.map(function(d) {
    return d.yAxis;
    }));
    var backgroundBar = svg.selectAll(null)
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "barBackground")
    .attr("y", function(d) {
    return y(d.yAxis);
    })
    .attr("height", y.bandwidth())
    .attr("width", function(d) {
    return x(100);
    });
    var bar = svg.selectAll(null)
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("y", function(d) {
    return y(d.yAxis);
    })
    .attr("width", function(d) {
    return x(d.xAxis);
    });
    var labels = svg.selectAll(null)
    .data(data)
    .enter()
    .append("text")        
    var values = svg.selectAll(null)
    .data(data)
    .enter()
    .append("text")        
    .attr("y", function(d) {
    return y(d.yAxis) + y.bandwidth() / 2;
    })
    .attr("x", 10)
    .text(function(d) {
    return +d.xAxis
    })
    .attr("x", function(d) {
    return x(d.xAxis) + 10;
    });

当前条形图

我想要什么

Answer 1

更改最后一行：

.attr("x", function(d) {
        return x(d.xAxis) + 10;
        });

并替换为：

.attr("x", x(-10));