Question

如何在条形图中添加标签？条形图沿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; });

Answer 1

您可以通过索引获取标签的值，如下所示：

 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]; });

D3.js为条形图添加标签

1 个答案: