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要素を追加できます。 bar`は、背景色を含んでいるスタイルにCSSの `ビットを仮定すると、たとえば...

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>