Karte + Legende auf demselben svg

Question

ich eine Woche lang versucht nun, habe dies zu realisieren Map+Legend

Ich kann immer noch nicht richtig

meine Legende anzuzeigen, wenn ich diese folgen

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

Die Legende wird zuerst angezeigt, dann erscheint die Karte und überschreibt sie.

Ich möchte die Karte und die Legende gleichzeitig anzeigen lassen und die Legende in der rechten unteren Ecke des m anzeigen ap (wo Leerzeichen befindet)

ich lese viel über z-Index so viele Dinge auf dem CSS-Teil meiner .legend Ich habe versucht, aber es kann nicht

herauszufinden

Here's my plunker

Thank Sie so sehr für Ihre Hilfe und für die Erklärung, was meine Fehler sind

Answer 1

Erstens: Sie legen jedes Element einzeln. Ich würde das nicht empfehlen. Sie verwenden bereits ein Element <g>, um die Einträge zu gruppieren. Sie können also die Positionierung an dieses Element anhängen.

Mit dem gesagt: Ihre X-Positionierung ist derzeit auf 50. Verwenden Sie etwas, das die Boxen nach rechts bewegt wie w- 120.

Implementierung beide ergibt:

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