我正在尝试使用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])
}
}
}
所以有时当我导航到另一个标签并返回时,我看到一些旧的网格线仍然与新创建的网格线一起存在。
有人可以对此有所了解吗?
答案 0 :(得分:3)
您似乎在循环播放时删除了该集合的项目。因此,当您在循环中进行并删除项目时,索引不会引用与原始数组中相同的项目。每次删除一个项目时,都会跳过下一个项目,因为它现在位于您刚测试的索引处。
解决这个问题的一个经典技巧是向后循环数组,这样你才能删除它末尾的项目。
PS:您可以考虑d3.js来帮助您的项目。