Question

我正在尝试使用SVG折线实现动态线图。多个选项卡下有多个图形（多个SVG）。通过将SVG保持在多个div下并隐藏除当前所选选项卡之外的所有div来实现选项卡。

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%" id="svg1">
        <line style="stroke:black;stroke-width:0.1" y2="25%" x2="100%" y1="25%" x1="0"/>
        <text style="fill:#999999; font-size:9pt" y="24%" x="20" id="label_1_75">2.475 tab1units</text>

        <line style="stroke:black;stroke-width:0.1" y2="50%" x2="100%" y1="50%" x1="0"/>
        <text style="fill:#999999; font-size:9pt" y="49%" x="20" id="label_1_50">1.650 tab1units</text>

        <line style="stroke:black;stroke-width:0.1" y2="75%" x2="100%" y1="75%" x1="0"/>
        <text style="fill:#999999; font-size:9pt" y="74%" x="20" id="label_1_25">0.825 tab1units</text>


        <polyline style="fill-opacity:0;stroke:brown;stroke-width:1" points="0,300 0,340000000 5,340000000 10,340000000 15,340000000 20,340000000 25,340000000" id="custgraph_graph_1_1"/>


        <polyline style="fill:red;fill-opacity:0.4;stroke:red;stroke-width:1" points="0,300 0,340000000 5,340000000 10,340000000 15,340000000 20,340000000 25,340000000 " id="custgraph_graph_1_2"/>


        <line id="custgraph_del_line_1_15" x1="15" y1="0" x2="15" y2="100%" style="stroke:black;stroke-width:0.1"/>
        <text id="custgraph_del_text_1_15" x="20" y="15" style="fill:#999999; font-size:9pt">4m</text>
        <line id="custgraph_del_line_1_315" x1="315" y1="0" x2="315" y2="100%" style="stroke:black;stroke-width:0.1"/>
        <text id="custgraph_del_text_1_315" x="320" y="15" style="fill:#999999; font-size:9pt">3m</text>
        <line id="custgraph_del_line_1_615" x1="615" y1="0" x2="615" y2="100%" style="stroke:black;stroke-width:0.1"/>
        <text id="custgraph_del_text_1_615" x="620" y="15" style="fill:#999999; font-size:9pt">2m</text>
        <line id="custgraph_del_line_1_915" x1="915" y1="0" x2="915" y2="100%" style="stroke:black;stroke-width:0.1"/>
        <text id="custgraph_del_text_1_915" x="920" y="15" style="fill:#999999; font-size:9pt">1m</text>
    </svg>

这些SVG具有行和文本元素作为显示网格（轴）的子节点。由于这些网格基于浏览器大小是动态的，因此每次选择选项卡时都会重新创建网格。每当选择一个标签时，我都会删除所有其他标签下的网格线。

    for (var i = width<%=tabnum[i]%> % (step<%=tabnum[i]%> * 60); i < width<%=tabnum[i]%>; i += step<%=tabnum[i]%> * 60)
    {
        var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('id','custgraph_del_line_<%=tabnum[i]%>_'+i );
            line.setAttribute('x1', i);
            line.setAttribute('y1', 0);
            line.setAttribute('x2', i);
            line.setAttribute('y2', '100%');
            line.setAttribute('style', 'stroke:black;stroke-width:0.1');

        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            text.setAttribute('id','custgraph_del_text_<%=tabnum[i]%>_'+i );
            text.setAttribute('x', i + 5);
            text.setAttribute('y', 15);
            text.setAttribute('style', 'fill:#999999; font-size:9pt');
            text.appendChild(document.createTextNode(Math.round((width<%=tabnum[i]%> - i) / step<%=tabnum[i]%> / 60) + 'm'));

        label_<%=tabnum[i]%>_25.parentNode.appendChild(line);
        label_<%=tabnum[i]%>_25.parentNode.appendChild(text);
    }

为此，我在所有其他SVG对象上调用“childNodes”方法。问题是我没有获得所有子节点。当我在firebug中查看DOM时，我可以看到只有部分孩子被删除了。

            childlist=label_<%=tabnum[i]%>_25.parentNode.childNodes;
            for(i = 0; i < childlist.length; i++)
            {

                if(typeof childlist[i].id !== "undefined")
                {        
                    if (childlist[i].id.indexOf("custgraph_del_") == 0) 
                    {

                        label_<%=tabnum[i]%>_25.parentNode.removeChild(childlist[i])

                    }
                }
            }

所以有时当我导航到另一个标签并返回时，我看到一些旧的网格线仍然与新创建的网格线一起存在。

有人可以对此有所了解吗？

Answer 1

您似乎在循环播放时删除了该集合的项目。因此，当您在循环中进行并删除项目时，索引不会引用与原始数组中相同的项目。每次删除一个项目时，都会跳过下一个项目，因为它现在位于您刚测试的索引处。

解决这个问题的一个经典技巧是向后循环数组，这样你才能删除它末尾的项目。

PS：您可以考虑d3.js来帮助您的项目。

“childNodes”未获取SVG对象的所有子节点

1 个答案: