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

首先，d3js 通常在使用 svg 而不是 div 时处于最佳状态，因此最好的解决方案可能是创建 svg rects 和文本元素，然后在每个元素上设置 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>