D3.js 在D3中移动图例的Y位置

我已经为我的choropleth地图创造了一个传奇，灵感来源于此：

挑战在于，我想更改图例在画布/svg中的位置

var legend = svg.selectAll("g.legend")
.data(ext_color_domain)
.enter().append("g")
.attr("class", "legend");

var ls_w = 20, ls_h = 20;

legend.append("rect")
.attr("x", 20)
.attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
.attr("width", ls_w)
.attr("height", ls_h)
.style("fill", function(d, i) { return color(d); })
.style("opacity", 0.8);

legend.append("text")
.attr("x", 50)
.attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
.text(function(d, i){ return legend_labels[i]; });

更改“x”位置很容易，但“y”位置是我遇到问题的位置。为什么我不能直接进入

.attr（“y”，100，function/*../

---

我不喜欢您的示例代码设置图例位置的方式。他正在设置图例的每一部分（包括

rect

和

text

）在整个svg中独立运行。应该做的是将每个

rect

和

text

定位在

g

中，然后使用

transform

将

g

作为一个组移动：

var legend = svg.selectAll("g.legend")
  .data(ext_color_domain)
  .enter().append("g")
  .attr("class", "legend")
  .attr('transform', 'translate(0,0)'); //<-- where does the group go

var ls_w = 20,
  ls_h = 20;

legend.append("rect")
  .attr("x", 20)
  .attr("y", function(d, i) {
    return (i * ls_h) - 2 * ls_h; //<-- position in group
  })
  .attr("width", ls_w)
  .attr("height", ls_h)
  .style("fill", function(d, i) {
    return color(d);
  })
  .style("opacity", 0.8);

legend.append("text")
  .attr("x", 50)
  .attr("y", function(d, i) {
    return (i * ls_h) - ls_h - 4; /<-- position in group
  })
  .text(function(d, i) {
    return legend_labels[i];
  });

var legend=svg.selectAll（“g.legend”）
.数据（外部颜色域）
.enter（）.append（“g”）
.attr（“类”、“图例”）
.attr（'transform'，'translate（0,0）；//您可以执行
.attr（y，100）
或
.attr（y，函数（d，i）{//返回一些计算；}）
，但不能同时执行这两个操作……您试图将图例移动到哪里？我正在尝试将其向北移动。我在原始注释中添加了指向视觉对象的链接。此位：
.attr（y，函数（d，i）{*/*/}
（我认为）使每个svg堆叠在彼此之上。因为，当我删除它并将
.attr（y，100）
放入时，图例会移动到该位置，但所有图例块都相互覆盖。完美的，该转换是我要寻找的关键。让我完全控制定位。非常感谢。