D3 JS为图表创建图例

D3 JS creating a legend for a chart

本文关键字：创建 D3 JS      更新时间：2023-09-26

我正试图为图表制作自己的图例，目前带颜色的条形图正在出现，但不是文本。下面是我的代码:

viz.selectAll("rect").data(data).enter().append("rect")
    .attr({
      x: margin,
      y: function (d, i) { return ((3*b)/data.length)*i; } ,
      width: 30,
      height: 15,
      fill: function(d, i) { return color(i); }
    })
.append("text").text(function (d) { return d.name; })
    .attr({
      "text-anchor" : "start",
      x: 2 * margin + parseFloat (d3.select(this).attr("width")), //doing 2* marging so I  can add some space between the text and the bar
      y: parseFloat(d3.select(this).attr("y"))
    });

我还尝试将x和y都更改为0，以防我定位错误，但这不起作用。当我尝试使用浏览器检查元素时，我注意到它根本没有添加文本。我做错了吗?

您正在向rect添加文本，这是不可能的。您应该将文本直接添加到viz:

viz.selectAll("rect").data(data).enter().append("rect")
  .attr({
    x: margin,
    y: function (d, i) { return ((3*b)/data.length)*i; } ,
    width: 30,
    height: 15,
    fill: function(d, i) { return color(i); }
  });
viz.selectAll("text").data(data).enter().append("text")
  .text(function (d) { return d.name; }).attr({
    "text-anchor" : "start",
    x: 2*margin + 30,
    y: function (d, i) { return ((3*b)/data.length)*i; }
  });

或者，也许更干净，创建g元素并将rect和text添加到其中(使用与您的示例略有不同，因为您没有提供数据):

  var vis = d3.select("#vis").append("svg")
    .attr("width", width).attr("height", height)
  var legend = ["red", "green", "blue"];
  var colors = ["#FF0000", "#00FF00", "#0000FF"];
  var margin = 10;
  vis.selectAll("g.legend").data(legend).enter().append("g")
    .attr("class", "legend").attr("transform", function(d,i) {
      return "translate(" + margin + "," + (margin + i*20) + ")";
    }).each(function(d, i) {
      d3.select(this).append("rect").attr("width", 30).attr("height", 15)
        .attr("fill", d);
      d3.select(this).append("text").attr("text-anchor", "start")
        .attr("x", 30+10).attr("y", 15/2).attr("dy", "0.35em")
        .text(d);
    });

Edit: attr("dy", "0.35em")确保文本行的中心与rect的中心水平对齐。请参阅d3 wiki了解概述。

相关文章：