javascript - 过渡后在 D3 投影顶部重绘关键点

Question

我正在使用类似于 Mike Bostock's Choropleth seen here 的 D3 map 投影.

我遇到的问题是我添加了一个过渡；当我转换投影时， map 键(在右上角看到)被 map 的背景色覆盖。

我知道我可能只需要在过渡后重绘 g 层，但我无法让它按预期工作。

我最初使用以下代码在 map 上绘制 key :

var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0,40)");

g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d, i) { return 350 + (i * 30)})
    .attr("width", 30)
    .attr("fill", function(d) { console.log(d[1]); return color(d[1]); });

g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Number of Licensed Establishments");

    g.call(d3.axisBottom(x)
        .tickSize(13)
        .tickValues(color.domain()))
      .select(".domain")
        .remove();

然后我用这段代码转换投影(也可以正常工作)。

path = d3.geoPath(projection);
    svg.selectAll("path").transition().duration(2000).attr("d", path);

但是关键被覆盖了。我试过像这样重新绘制它:

g.selectAll("g").attr("transform", "translate(0,40)");

虽然它没有做任何事情。我错过了什么步骤来正确地重绘顶部的 g 层？

Answer 1

路径的过渡不应改变它在 DOM 中的显示位置。使用 d3 转换元素属性会修改 DOM 中的元素。下面的示例应该演示这一点(路径首先附加并且应该在文本后面，然后路径通过保留在文本后面的两个 d3 符号路径转换其 d 属性):

var svg = d3.select('body').append('svg').attr('width',400).attr('height',200);

var cross = "M-21.213203435596427,-7.0710678118654755L-7.0710678118654755,-7.0710678118654755L-7.0710678118654755,-21.213203435596427L7.0710678118654755,-21.213203435596427L7.0710678118654755,-7.0710678118654755L21.213203435596427,-7.0710678118654755L21.213203435596427,7.0710678118654755L7.0710678118654755,7.0710678118654755L7.0710678118654755,21.213203435596427L-7.0710678118654755,21.213203435596427L-7.0710678118654755,7.0710678118654755L-21.213203435596427,7.0710678118654755Z";

var star = "M0,-29.846492114305246L6.700954981042517,-9.223073285798176L28.38570081386192,-9.223073285798177L10.8423729164097,3.5229005144437298L17.543327897452222,24.146319342950797L1.7763568394002505e-15,11.400345542708891L-17.543327897452215,24.1463193429508L-10.842372916409698,3.522900514443731L-28.38570081386192,-9.22307328579817L-6.7009549810425195,-9.223073285798176Z";

var wye = "M8.533600336205877,4.926876451265144L8.533600336205877,21.9940771236769L-8.533600336205877,21.9940771236769L-8.533600336205877,4.9268764512651435L-23.31422969000131,-3.6067238849407337L-14.78062935379543,-18.387353238736164L0,-9.853752902530289L14.78062935379543,-18.387353238736164L23.31422969000131,-3.6067238849407337Z"

var symbol = svg.append('path')
   .attr('transform','translate(100,100)')
   .attr('d', cross )
   .attr("fill","orange");
   
var text = svg.append('text')
  .attr('x', 100)
  .attr('y', 105)
  .style('text-anchor','middle')
  .text('THIS IS SOME TEXT')
   
symbol.transition()
  .delay(2000)
  .attr('d', star )
  .duration(2000)
  .transition()
  .attr('d', wye )
  .duration(2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

根据您的示例， key 最初可能呈现在 map 要素的后面——只是两者之间没有重叠。每个都按预期出现。过渡时，比如缩放，特征重叠并且键被隐藏。如评论中所述，尝试 g.raise() 或 d3.select(".key").raise() 将键移动到父级的底部容器，有效地将它提升到其他 svg 元素之上(因为元素按照它们在 DOM 中出现的顺序呈现，尽可能接近 svg 中的 z-index)。您应该只需要应用 .raise() 一次 - 因为转换不会更改顺序，或者确保将 key 最后附加到 svg。