Question

我已经尝试了一个星期来实现这个Map+Legend

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

当我按照这个

<script>
    $('#confirm-reservation').on('show.bs.modal', function (e) {
        $(this).find('.dropdown-menu li').remove();
        $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));

        var startTime = moment($(e.relatedTarget).data('start-time')).utc();
        var endTime = moment($(e.relatedTarget).data('end-time')).utc();

        while (startTime < endTime) {
            $(this).find('.dropdown-menu').append('<li><a href="#">' + startTime.format("HH:mm") + '</a></li>');
            startTime.add(30, 'minutes');
        }
    });
</script>

首先显示图例，然后显示地图并覆盖它

我希望同时显示地图和图例，并在地图的右下角显示图例（空白处所在的位置）

我读了很多关于z-index的内容，所以我在.legend的css部分尝试了很多东西，但无法弄明白

Here's my plunker

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

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

同一svg上的地图+传奇

1 个答案: