d3.js图例:组之间的水平间距

// 创建一个图例
var legend = d3.select("body")
  .append("svg")
  .attr("class", "legend")
  .attr("width", 200)
  .attr("height", 100);

// 定义图例的数据
var legendData = [
  { label: "组1", color: "red" },
  { label: "组2", color: "blue" },
  { label: "组3", color: "green" }
];

// 添加图例项
var legendItems = legend.selectAll(".legend-item")
  .data(legendData)
  .enter()
  .append("g")
  .attr("class", "legend-item")
  .attr("transform", function(d, i) {
    return "translate(0," + i * 20 + ")";
  });

// 添加图例颜色块
legendItems.append("rect")
  .attr("width", 10)
  .attr("height", 10)
  .attr("fill", function(d) {
    return d.color;
  });

// 添加图例标签
legendItems.append("text")
  .attr("x", 20)
  .attr("y", 10)
  .text(function(d) {
    return d.label;
  });