Question

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

要创建网格背景，我使用以下HTML设置我的SVG（code from this post）：

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

我将地图附加到此SVG，因此：

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

当谈到将这些地图转换出来并将网格留在网格背景上时，我很挣扎 - 当我试图单独删除地图但离开网格时，网格也会消失，尽管圆圈仍然存在：

{{1}}

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

编辑：我知道初始网格设置有点乱 - 我无法弄清楚如何在JS中执行此操作。如果你有任何建议，我很乐意听到它们并简化HTML。

Answer 1

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

您需要修复选择器以不选择模式中的路径。也许你可以给一些类路径并按类选择合适的路径。

当我在D3中将地图不透明度设置为0时，为什么整个SVG会消失？

1 个答案: