D3沿右轴对齐文本

Question

在此图片中，大数字（100.00001、200.000001、300.00001、400.00001）正确，因为它们与条形图轴对齐。当条形图的大小不足以容纳此文本时，对于较小的数字会出现问题，因此溢出到轴的右侧。我如何解决此问题，以使轴的左侧对齐所有数字，而与钢筋的大小无关。

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>

Answer 1

首先，与div相比，d3js在使用svg时通常处于最佳状态，因此最好的解决方案可能是创建svg rect和text元素，然后在每个上设置x和y坐标。

话虽如此，仍然可以通过使用d3js和css来实现所需的功能，如示例中所示。解决方案是将绝对定位应用于文本-参见下文：

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 chart = d3.select("#chart").append("div").attr("class", "chartstyle");
var bars = chart.selectAll("div").data(data);
bars.enter().append("div")
  .attr("class", "rect")
  .style("width", function(d) {
    return d + "px";
  })
  .style("height", "20px");
bars.append("div")
  .attr("class", "numericVal")
  .text(function(d) {
    return d;
  })
  .style("height", "20px");

.chartstyle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 100px;
}

.rect {
  background-color: red;
  text-align: right;
  padding: 0px;
  margin: 0px;
  color: black;
  position: relative;
}

.numericVal {
  position: absolute;
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>