尝试在d3.js中对齐文本(Trying to align text in d3.js)

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

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

我正努力在我的代码中包含和对齐条形图两侧的文本元素。 这是我的代码和下面的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，一切都让我感到困惑。

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

谢谢

I'm trying to dynamically create an unconventional bar chart (I think that's how to describe it, please correct me with better terminology if possible!)

Here is an example I'm trying to recreate

I'm struggling to include and align the text elements either side of the bar within my code. Here is my code and a plnk below;

The offending code;

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

I would also like the number to appear once the animation has finished, but one problem at a time!

Apologies if I'm missing something obvious here, I am new to using d3.js and everything is still confusing for me.

I hope I've explained the problem enough, but please let me know if you need more information.

Thanks

最满意答案

首先，工作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()函数;）

Firstly, working Plnk: http://plnkr.co/edit/vZYLTY5FEfpDmUw2f0sj?p=preview

---

Explanation:

Your code generated the following HTML for each bar:

<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>

And if you look at the generated bars, they're taking up a lot of width:

So I changed the Javascript code to put the text first, and I changed the CSS so that you could arrange it nicely. I also put all the bar graph generating logic into the loadBars() function ;)