Javascript 使用d3.js在水平图表上显示标签

我使用以下代码创建了一个带有d3.js的简单图表。现在假设var数据格式正确（例如“[20,15,15,40,10]”），水平图显示正确，但我想在左侧添加一些标签，我有点被d3.js淹没了。我试图在表示和显示数据的每个其他div之前插入一个包含标签的额外div，但我不明白这是如何或是否正确的方法。 结果应该类似于：

标签1 |====================================================40%==|

标签2 |============================30%==|

标签3 |=======15%==|

等等。条形图显示得很好，但如何在左侧添加标签？这是一段显示条形图的脚本（给定一个id为“chart”的div和正确的css）

---

你会发现一个有效的例子。那么，如何在每个条的左侧添加标签，以便用户知道每个条代表什么？

我认为您在每个条之前添加包含标签的

的想法是合理的。为此，首先需要为每个条追加一个

，然后追加一个包含标签的

，最后追加一个包含条的

。我已经用下面的Javascript代码更新了您的示例（还需要对CSS进行一些更改）：

---

JSFIDLE输出的屏幕截图

---

没错！非常感谢，这让我对d3.js的工作原理有了更好的理解。

chart = d3.select('#chart')
                  .append('div').attr('class', 'chart')
                  .selectAll('div')
                  .data(data).enter()
                  .append('div')
                  .transition().ease('elastic')
                  .style('width', function(d) { return d + '%'; })
                  .text(function(d) { return d + '%'; });

// Add the div containing the whole chart
var chart = d3.select('#chart').append('div').attr('class', 'chart');

// Add one div per bar which will group together both labels and bars
var g = chart.selectAll('div')
                .data([52,15,9,3,3,2,2,2,1,1]).enter()
                .append('div')

// Add the labels
g.append("div")
    .style("display", "inline")
    .text(function(d, i){ return "Label" + i; });

// Add the bars
var bars = g.append("div")
    .attr("class", "rect")
    .text(function(d) { return d + '%'; });

// Execute the transition to show the bars
bars.transition()
    .ease('elastic')
    .style('width', function(d) { return d + '%'; })