D3.js，将绘图点与材质图标混合

Question

我正在尝试在svg上显示绘图点。在开发人员控制台中浏览时，我看到它们已被附加，但是它们未显示在页面上。

我尝试添加z-index作为样式属性，但这并没有导致绘图点出现

<script>
    $(document).ready( function() {
        var rotation = 'front'
        var bodiesd3 = d3.selectAll(`#${gender}_body_front_item`)
        console.log(bodiesd3)
        var bodyTarget, tagName = undefined
        var x, y = 0
        let plots = []
        let colors = [
            { code: 'BURN', color: '#EBB600' },
            { code: 'OTHER', color: '#C6C5C7' }
        ]

        /*
            Feed plots into SVG
        */
        let feedPlots = function(inPlots) {
            bodiesd3.nodes().forEach( function(body) {
                console.log(body)
                let id = body.id
                console.log(id)
                let reFront = /front/i
                let reBack = /back/i
                let isFront = id.match(reFront)
                let isBack = id.match(reBack)
                inPlots.forEach(function (plot) {
                    if (isFront != null && isFront.toString() === plot.rotation) {
                        // colors
                        colors.forEach(function(element) {

                        if (element.code === plot.code) {
                                console.log(element.code === plot.code)
                                var b = d3.select(body)
                                console.log(b)
                                b.append("i")
                                .style("height", 24 + "px")
                                .style("width", 24 + "px")
                                .attr("class", "material-icons")
                                .attr("cx", plot.x)
                                .attr("cy", plot.y)
                                .text("lens");
                            }
                        });
                    }
                })
            })
        }

        feedPlots(incomingPlots)
    })
</script>

完整代码在这里：https://codepen.io/anon/pen/roGyJb

期望绘图点显示在svg的顶部，但元素甚至不显示