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>

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

1 个答案: