【问题标题】：Trying to align text in d3.js尝试在 d3.js 中对齐文本
【发布时间】：2016-05-13 01:17:29
【问题描述】：

我正在尝试动态创建一个非常规的条形图（我认为这就是描述它的方式，如果可能，请用更好的术语纠正我！）

这是我正在尝试重新创建的示例

我正在努力在我的代码中包含和对齐栏两侧的文本元素。这是我的代码和下面的 plnk；

违规代码；

function loadBars() {

var start_val = 0;

d3.select("body").selectAll(".barChart")
    .append("text")
    .text(function(d) {
        return d.skill
    })

d3.select("body").selectAll(".pathBar")
    .transition()
    .delay(function(d, i) {
        return 200;
    })

.duration(1000)
    .style("width", function(d, i) {
        return d.progress * 0.6 + "%";
    })

d3.select("body").selectAll(".pathBar")
    .append("text")
    .text(function(d) {
        return d.progress
    })

请进：

http://plnkr.co/edit/sneKYhTPAK0X8IhhExj9?p=preview

我也希望在动画完成后出现数字，但一次一个问题！

抱歉，如果我在这里遗漏了一些明显的东西，我是使用 d3.js 的新手，一切对我来说仍然很困惑。

我希望我已经对问题进行了充分的解释，但如果您需要更多信息，请告诉我。

谢谢

【问题讨论】：

我会使用 rect 而不是 div

标签： javascript d3.js

【解决方案1】：

vZYLTY5FEfpDmUw2f0sj?p=preview

解释：

您的代码为每个条生成了以下 HTML：

<div class="barResultsContainer">
    <div class="barChart">
        <div class="pathBar" style="width: 60%;">
            <div></div>
            <text>100</text>
        </div>
        <!-- Your text is AFTER your bar -->
        <text>AngularJS</text>
    </div>
</div>

如果您查看生成的条形图，它们会占用很多宽度：

所以我更改了 Javascript 代码以将文本放在前面，并更改了 CSS 以便您可以很好地安排它。我还将所有条形图生成逻辑放入loadBars()函数中；）

【讨论】：

啊，解释得很好 - 我知道我哪里出错了，非常感谢！

【解决方案2】：

这是一个在条形后面带有文本的解决方案（基于 Martin 的 Plunker）：

http://plnkr.co/edit/9FMNDrYnBJdZ2YHqplzc?p=preview

基本上，我为文本创建了另一个类：

.pathBarText {
  float: right;
  display: inline;
  height: 18px;
  width: 0px;
  background-color: white;
}

【讨论】：