Question

我为我的合唱地图创造了一个传奇： http://bl.ocks.org/KoGor/5685876

挑战在于，我想在canvas / 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/*..*/？

visual: click here

Answer 1

我不喜欢你的示例代码设置图例位置的方式。他正在整个svg中独立设置传奇的每一部分（rect和text）。应该做的是每个rect和text位于g内，然后g使用transform作为一个组移动：

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

完整示例here。

在D3中移动图例的Y位置

1 个答案: