js为条形图添加标签

D3.js add label to bar chart

本文关键字：加标签 添加 条形图 js      更新时间：2023-09-26

如何在条形图中添加标签?条形图沿着x轴延伸，我想沿着y轴附加标签。

我读了一些例子，他们使用外部。tsv或。csv文件。我能把它们存储在数组中吗?我的代码如下:

var data = [7, 8, 15, 16];
var label = ["as","bs","cs","ds"];
var width = 420,
  barHeight = 20;
var x = d3.scale.linear()
  .domain([0, d3.max(data)])
  .range([0, width]);
var chart = d3.select(".chart")
  .attr("width", width)
  .attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
  .attr("width", x)
  .attr("height", barHeight - 1);
bar.append("text")
  .attr("x", function(d) { return x(d) - 3; })
  .attr("y", barHeight / 2)
  .attr("dy", ".35em")
  .text(function(d) { return d; });

您可以像这样通过索引获取标签的值:

 bar.append("text")
          .attr("x", function(d) { return x(d) - 3; })
          .attr("y", barHeight / 2)
          .attr("dy", ".35em")
          .text(function(d, i) { return label[i]; });
相关文章：