Javascript D3将轴左侧的文本与最右侧的字符对齐

所以我有一个D3条形图，看起来像：。较小的数据条在轴的右侧重叠时出现问题。我希望将数据文本沿图形轴的左侧对齐，如图所示，与较大的数字对齐，而不管条形图有多小

var data = [200.000001,3.00001,300.00001,1.00001,400.00001,5.0001,100.00001,20.0001,40.0001,50.00001, 2.00001];

//bar chart
var bars = d3.select("#chart").append("div").attr("class","chartstyle");
var b = bars.selectAll("div")
  .data(data)
  .enter().append("div")
  .style("width", function(d) { return d  + "px"; })
  .text(function(d) { return d; });
});

//from stylesheet
<style>
.chartstyle div {
    font: 10px;
    background-color: red;
    text-align: right;
    padding: 0px;
    margin: 0px;
    color: black;
}
</style>

最好使用svg:text元素，并将文本锚属性设置为end，而不是混合来自不同名称空间的节点

var gBars = d3.select("#chart")
  .selectAll(".bar-container")
  .data(data)
  .enter().append("g")
    .attr("class", "bar-container");

// bars
gbars.append("rect")
  .attr("class", "bar")
  [...] // bars positioning and sizing logic

// labels
gBars.append("text")
  .attr("class", "bar-label")
  .attr("text-anchor", "end")
  [...] // same positioning logic
  .text(Object);

最好使用svg:text元素，并将文本锚属性设置为end，而不是混合来自不同名称空间的节点

var gBars = d3.select("#chart")
  .selectAll(".bar-container")
  .data(data)
  .enter().append("g")
    .attr("class", "bar-container");

// bars
gbars.append("rect")
  .attr("class", "bar")
  [...] // bars positioning and sizing logic

// labels
gBars.append("text")
  .attr("class", "bar-label")
  .attr("text-anchor", "end")
  [...] // same positioning logic
  .text(Object);