SVG上的地图和图例

Question

I've been trying for a week now to realize this Map+Legend

I still can't display correctly my legend

when i follow this

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

Legend is displayed first then map appears and overwrites it

I'd like to have map and legend displayed at the same time and legend displayed on the right-bottom corner of the map (where blank space is located)

I read a lot about z-index so i tried many things on the css part of my .legend but can't figure it out

Here's my plunker

Thank you so much for your help and for explaining to me what my mistakes are

Answer 1

First: You place each element individually. I would not recommend that. You already use a <g> element to group the entries. So you could attach the positioning to that element.

With that being said: Your x-positioning is currently to 50. Use something which moves the boxes to the right like w- 120 .

Implementing both yields:

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