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

Question

我正在使用以下代码使用d3.js创建一个简单的图表。现在假设var数据格式正确（例如“[20,15,15,40,10]”），水平图表显示正常，但我想在左边添加一些标签，我有点不知所措由d3.js。我试图在代表和显示数据的每个其他div之前插入一个包含标签的额外div，但我无法理解这是怎么回事。 结果应该类似于：

标签1 | ============================= 40％== |

标签2 | ================= 30％== |

标签3 | ====== 15％== |

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

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输出的屏幕截图