尝试在d3.js中对齐文本

Question

我试图动态创建一个非传统的条形图（我认为如何描述它，请尽可能用更好的术语来纠正我！）

以下是我尝试重新创建

的示例

我努力在我的代码中包含和对齐条形图两侧的文本元素。这是我的代码和下面的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
    })

Plnk：

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

我还想在动画完成后显示数字，但一次只能出现一个问题！

道歉，如果我在这里遗漏了一些明显的东西，我是新手使用d3.js，一切都让我感到困惑。

我希望我已经解释了这个问题，但如果您需要更多信息，请告诉我。

由于

Answer 1

首先，使用Plnk：http://plnkr.co/edit/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()函数;）

Answer 2

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

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

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

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