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

を0

そしてと交換してください：私はあなたの最後の質問に答える、このコードを書いた

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