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

我在D3中创建了一个地图，该地图位于具有网格图案（check out the gist block here — click "ranks" and "pop" to transition)）的svg上。我已经用圆圈标记了一些城市，并且有一个按钮可以从地图过渡到图形，同时保持圆圈可见。

要创建网格背景，我使用以下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>

我将地图附加到此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
                    });

要将地图移出并将圆环留在网格背景上时，我很努力-当我尝试单独删除地图但离开网格时，网格也消失了，尽管圆仍然存在：

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

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

编辑：我知道最初的网格设置有点混乱-我不知道如何在JS中做到这一点。如果您有任何建议，我很想听听他们的意见，并简化HTML。

最佳答案

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

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

关于javascript - 在D3中将 map 不透明度设置为0时，为什么整个SVG都消失了？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32829286/