Question

我试图循环遍历可变数量的对象并使用与它们相关联的x / y坐标创建svg圆圈（它们是不同的坐标）。当页面呈现时，我看到绘制的圆圈快速闪烁，然后只有一个。这是我的代码：

        var parsed_payload = JSON.parse(JSON.stringify(payload.substring(payload.indexOf("{",0))));
        var m = new Map();
        if (sessionStorage.getItem['customers'] != null){
            m = sessionStorage.getItem['customers'];
        }

        var key = getKey(parsed_payload);           
        //Delete from map if the customer has left the store
        if ( topic=="customerexit") {
            m.delete(key)
        }else{
            m.set(key,parsed_payload);
        }

        sessionStorage.setItem('customers', m);

        document.body.innerHTML = '';

        var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg1.setAttribute("height",1000);
        svg1.setAttribute("width",500);
        document.body.appendChild(svg1);

        m.forEach(function (item, key, mapObj) {
            var obj = JSON.parse(JSON.stringify(item));
            var x = getX(obj);
            var y = getY(obj);

            var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
            circles.setAttribute("cx",Number(x));
            circles.setAttribute("cy",Number(y));
            circles.setAttribute("r",3);
            circles.setAttribute("fill","red");
            svg1.appendChild(circles);

        });      

    }

我确定我在这里遗漏了一些明显的东西。任何帮助将不胜感激。

谢谢，泰德

Answer 1

谢谢你看看保罗。我发现了我的问题。我正在创建一个地图并存储在sessionStorage上，但它返回null（因为storageSession只存储字符串）并且我的地图总是被重新创建，这就是我每次只绘制一个圆的原因。

再次感谢，泰德

使用svg创建多个圆圈只显示一个圆圈

1 个答案: