javascript - 尝试对齐 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
    })

点击:

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() 函数中；)