javascript - 为什么在 D3 中将 map 不透明度设置为 0 时整个 SVG 消失了？

Question

我在 D3 中创建了一个 map ，它位于一个带有网格图案 (check out the gist block here — click "ranks" and "pop" to transition)) 的 svg 上。我用圆圈标记了一些城市，并有一个按钮可以从 map 转换为图表，同时保持圆圈可见。

为了创建网格背景，我使用了以下 HTML 来设置我的 SVG ( code from this post ):

<div id ="bck" style="width:700px;height:500px">
          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
                <path d="M 8 0 L 0 0 0 8" fill="none" stroke="lightblue" stroke-width="0.5"/>
              </pattern>
              <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
                <rect width="80" height="80" fill="url(#smallGrid)"/>
                <path d="M 80 0 L 0 0 0 80" fill="none" stroke="lightblue" stroke-width="0.5"/>
              </pattern>
            </defs>

            <rect width="100%" height="100%" fill="url(#grid)" />
          </svg>
        </div>

我将 map 附加到此 SVG，因此:

var svg = d3.select("body").select("svg");
svg.selectAll("path")
                    .data(json.features)
                    .enter()
                    .append("path")
                    .attr("d", path)
                    .attr({
                        "fill": "#B0B0B0",
                        "stroke": "White",
                        "stroke-width": 0.3,
                        "opacity": 1
                    });

当涉及到将这张 map 转换出来并将圆圈留在网格化背景上时，我很挣扎——当我试图单独移除 map 但保留网格时，网格也消失了，尽管圆圈仍然存在:

        d3.selectAll("path")
            .transition()
            .delay(10)
            .duration(1000)
            .attr({
                "stroke-width": 0,
                "opacity": 0
            });

为什么网格也消失了，而不仅仅是代表 map 的“路径”？如何在淡出 map 的同时保持背景中的网格并保持圆圈可见？

编辑:我知道初始网格设置有点困惑 — 我不知道如何在 JS 中执行此操作。如果您有任何建议，我很乐意听取并简化 HTML。

Answer 1

模式包含路径元素。当您选择所有路径时，您也会获得图案中的路径，因此图案变得不可见，因此填充图案的网格也变得不可见。

您需要修复选择器不选择模式内的路径。也许你可以给一些路径一个类，然后按类选择合适的路径。