d3.js鼠标悬停重叠元素

Question

我在解决d3.js重叠方面遇到了问题。这是我的情况

1. PDF已转换为SVG。 [由Inkscape完成]
2. SVG文件中约有30000个元素。 （约8MB）。
3. 使用d3.js [Done]
将SVG加载到浏览器中
4. 当鼠标悬停[部分完成]
时，元素将突出显示

我的代码如下：

<script type="text/javascript">
    var svg;
    var t;
    var zoomLevel = 2;
    var dz = 1;
    var path;
    $(document).ready(function () {
        var loader = d3.xml('imgs/drawing4.svg', function (xml) {
            $('#mainDrawing').append(xml.documentElement);
            svg = d3.select('#layer1');
            t = d3.transform(svg.attr('transform'));
            zoomLevel = t.scale[0];
            var group = d3.select('#g2995');
            d3.select('#path2997').remove();

            path = group.selectAll('path')
                .on('mouseover', function () {
                    var self = d3.select(this);
                    self.style('fill', 'orange');
                })
                .on('mouseout', function () {
                    var self = d3.select(this);
                    self.style('fill', 'red');
                });
            });

            $('#zoomOut').click(function () {
                if (zoomLevel > 0.1)
                    zoomLevel -= dz / 10;
                svg.attr("transform", "translate(" + t.translate + ") scale(" + zoomLevel + ")");

            });

            $('#zoomIn').click(function () {
                if (zoomLevel < 2)
                    zoomLevel += dz / 10;
                svg.attr("transform", "translate(" + t.translate + ") scale(" + zoomLevel + ")");
            });
    });    
</script>

非常感谢 肯

---

显示某些元素的另一张图片重叠（在inkscape中选择所有元素）。 Picture 1

鼠标悬停时，元素会突出显示。 （图片在Firefox中渲染）！ Picture 2

问题是我不能不选择SSB51的下层元素（主要是路径） 再次感谢！