Карта + Легенда на том же SVG

Question

Я уже неделю пытаюсь реализовать эту карту + легенда

Я все еще не могу правильно отобразить мою легенду

когда я следую за этим

var legend = svg.selectAll("g.legend")
  .data(extent_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 h - (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 h - (i*ls_h) - ls_h - 4;})
  .text(function(d, i){ return legend_labels[i]; });

Сначала отображается легенда, затем появляется карта и перезаписывает ее

Мне бы хотелось, чтобы карта и легенда отображались одновременно, а легенда отображалась в правом нижнем углу карты (где находится пустое пространство).

Я много читал о z-index, поэтому пробовал много вещей в css-части моей.legend, но не могу понять

Вот мой поршень

Большое спасибо за вашу помощь и за объяснение мне моих ошибок

Answer 1

Первое: вы размещаете каждый элемент отдельно. Я бы не рекомендовал это. Вы уже используете <g> элемент для группировки записей. Таким образом, вы можете прикрепить позиционирование к этому элементу.

С учетом вышесказанного: ваше x-позиционирование в настоящее время составляет 50. Используйте что-то, что перемещает прямоугольники вправо, как w- 120,

Реализация обоих выходов:

var ls_w = 20, ls_h = 20;

var legend = svg.selectAll("g.legend")
  .data(extent_color_domain)
  .enter().append("g")
  .attr("class", "legend")
  .attr( 'transform', function(d,i) {
    return 'translate( ' + (w - 120) + ' ' + (h - (i*ls_h) - ls_h) + ' )' 
  });

legend.append("rect")
  .attr("x", 20)
  .attr("y", -20 )
  .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", -4 )
  .text(function(d, i){ return legend_labels[i]; });