同一svg上的地图+传奇 [英] Map + Legend on same svg

问题描述

我已经尝试了一个星期来实现这个地图+传奇

我仍然无法正确显示我的传奇

当我按照这个

  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的内容，所以我在.legend的css部分尝试了很多东西，但无法弄清楚

这是我的傻瓜

非常感谢你们你的帮助，并向我解释我的错误是什么

解决方案

首先：你单独放置每个元素。我不建议这样做。您已使用< 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'alvert（'+（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）;}）
。风格（不透明，0.8）; 
 
 legend.append（text）
 .attr（x，50）
 .attr（y， -  4）
 .text（ function（d，i）{return legend_labels [i];}）; 
  

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

解决方案

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

这篇关于同一svg上的地图+传奇的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！