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

Question

我正在使用以下代码使用 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 。那么，如何在每个条的左侧添加标签，以便用户知道每个条代表什么？

Answer 1

我认为您在每个条形之前附加一个包含标签的<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 输出截图