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

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 + '%'; });

您会找到一个有效的示例here。因此，如何在每个条形图的左侧添加标签，以便用户知道每个条形图代表什么？

最佳答案

我认为您的想法是在每个小节之前附加包含标签的<div>。为此，您首先需要为每个条添加一个<div>，然后添加一个包含标签的<div>，最后添加一个包含条的<div>。我已经使用JSFiddle here和下面的Javascript代码更新了您的示例（CSS也需要进行一些更改）：

// 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 + '%'; })

JSFiddle输出的屏幕截图