我正在尝试使用 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])
}
}
}
因此,有时当我导航到另一个选项卡并返回时,我发现一些旧的网格线仍然与新创建的网格线一起存在。
有人可以解释一下吗?
最佳答案
您似乎在循环时删除了集合中的项目。因此,当您在循环中进行并删除项目时,索引不会引用与原始数组中相同的项目。每次删除一个项目时,您都会跳过下一个项目,因为它现在被放置在您刚刚测试的索引处。
解决此问题的一个经典技巧是向后循环数组,这样您就只能删除末尾的项目。
PS:你可以考虑d3.js为您的项目提供帮助。
关于javascript - "childNodes"未获取 SVG 对象的所有子节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21362535/