是否在d3水平条形图中添加标签？

Question

我对d3相当陌生，我有一个非常简单的条形图，对于每行传递的每个数字，其宽度均为50px。 我正在尝试添加标签，使其位于酒吧本身之前，以便查看者可以理解其代表的含义。

这是我的代码：

      var data2 = [4, 3, 1, 1];
      var fwSkills = ["a", "b", "c", "d"];

      d3.select(".frameworks")
        .selectAll("div")
          .data(data2)
        .enter().append("div")
          .style("width", function(e) { return e * 50 + "px"; })
          .text(function(e) { return e; });

这根本不会添加标签，但是到目前为止我尝试过的所有方法都不起作用（或者至少不能正确显示该栏）。 还有一些CSS可以对栏本身进行样式设置。 我想将标签添加到数组fwSkills中 ，使其位于相应栏的前面。

我在这里可以做什么？ 我觉得这是一个简单的JS修复程序。 谢谢！

Answer 1

您可以为每个数据值附加一个div元素。 然后，在每个div元素内，您可以为标签添加div元素，为酒吧添加div元素。 例如...

 var data2 = [4, 3, 1, 1]; var fwSkills = ["a", "b", "c", "d"]; var divs = d3.select(".frameworks") .selectAll("div") .data(data2) .enter() .append("div"); // add labels divs.append("div") .classed("label", true) .style("width", "20px") .text(function (e,i ) { return fwSkills[i]; }); // add bars divs.append("div") .classed("bar", true) .style("width", function(e) { return e * 50 + "px"; }) .text(function(e) { return e; }); 

 .label { display: inline-block; } .bar { display: inline-block; background-color: steelBlue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div class="frameworks"></div>