时间戳

首页 > 解决方案 > 如何在 SVG 上“单击”时解析和获取 XML 数据？

javascript - 如何在 SVG 上“单击”时解析和获取 XML 数据？

问题描述

我有一个美国的 SVG，一旦你点击某个特定的州，美国 SVG 就会淡出，并且会出现一个单独的点击该州的 SVG（该州的放大版）。每个州都有县，有自己的路径和身份。

我有一些测试 XML 解析器，它们应该与每个特定状态一起使用。我正在尝试获取它，因此一旦您单击县路径，特定的 XML 数据就会提醒您特定的县信息。

这是我在洛杉矶的 XML 示例：

 var parser, xmlDoc;
var xml = 
 "<Opportunities>
    <Opportunity>
        <State>CA</State>
           <County>Los Angeles</County> 
             <TotalChildrenUnassigned>186</TotalChildrenUnassigned> 
    </Opportunity>
  </Opportunities>";

加利福尼亚的 SVG 太大了，所以这里只是洛杉矶的路径：

<path
 style="font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke- 
 width:1;stroke-linecap:butt;stroke-linejoin:bevel;stroke- 
 miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none"
 d="m 361.25368,643.31194 -3.25507,-0.14099 -2.06586,-2.85131 -0.276,-0.49114 -1.00654,-3.58799 -0.91321,-6.41202 1.15265,0.43201 5.99874,11.719 0.4952,1.19145 -0.12992,0.14099 m -2.21199,-39.92283 -0.1827,-0.15004 -0.0365,-0.42292 0.0365,-0.0818 0.19888,0.0592 2.23634,0.84132 2.5042,2.25557 2.02936,1.82357 1.53823,1.4552 1.97659,4.58847 0.16237,0.47293 0.10965,0.98228 -0.19888,0.53207 -0.60472,0.39561 -0.0365,0.0182 h -0.34904 l -5.26817,-2.78765 -0.34904,-0.35016 -3.76647,-9.63169 m 55.39297,-67.34899 -2.78427,13.52435 -1.29472,7.81269 -0.97409,6.63939 -0.38556,2.8695 -2.81269,6.82132 -2.43114,4.55207 -0.97002,1.80538 -3.03995,1.6553 -1.09586,1.50068 -0.0731,0.40927 0.19886,0.92317 0.34906,0.55478 -5.74305,-1.47795 -0.49515,-0.12281 -1.9563,-0.14098 -4.61065,4.44295 -2.34188,3.30152 -1.11613,2.21008 -3.25508,0.4957 -3.42145,-0.0818 -1.57477,-0.69576 -0.78334,-0.49569 -3.05619,-2.2101 -0.54791,-0.50933 -0.32877,-2.06912 0.30846,-0.36834 0.99031,-0.82313 0.5114,-0.12282 0.2557,-0.59119 0.27192,-1.47793 -0.32469,-2.70579 -0.20293,-1.31424 -0.10954,-0.73671 -0.23542,-1.51886 -0.42209,-1.84631 -0.58852,-1.77808 -0.0528,-0.12736 -0.0731,-0.18645 -0.0202,-0.0365 -0.45457,-1.00502 -0.0932,-0.14095 -0.34501,-0.55481 -0.11352,-0.1819 -0.12572,-0.12735 -0.73463,-0.77763 -1.05932,-0.46841 -4.18858,-0.98681 -3.29158,-0.49113 -1.73713,0.16366 -6.47768,-3.21965 0.54794,-1.64167 4.17234,-2.0282 3.36466,-1.57799 5.04899,1.39611 2.56104,-4.57483 0.27599,-2.14644 -3.96939,-31.38255 -0.18271,-1.70077 51.03801,13.3652"
 id="Los Angeles"
 inkscape:connector-curvature="0" />

使用 jQuery 或 JavaScript，一旦我点击特定的县，我如何才能做到这一点，特定的“TotalChildrenUnassigned”数据警报？如果有更多信息可以提供帮助，请告诉我，谢谢。

标签： javascriptxmlsvgxml-parsing

解决方案

我希望我正确地理解了你。

我的解决方案：

var xmlDoc,
    xml =
    '<Opportunities>' +
        '<Opportunity>' +
            '<State>CA</State>' +
            '<County>Los Angeles</County>' + 
            '<TotalChildrenUnassigned>186</TotalChildrenUnassigned>' +
        '</Opportunity>' +
        '<Opportunity>' +
            '<State>CA</State>' +
            '<County>San Francisco</County>' + 
            '<TotalChildrenUnassigned>99</TotalChildrenUnassigned>' +
        '</Opportunity>' +
        '<Opportunity>' +
            '<State>CA</State>' +
            '<County>San Diego</County>' + 
            '<TotalChildrenUnassigned>144</TotalChildrenUnassigned>' +
        '</Opportunity>' +
    '</Opportunities>';

if(window.DOMParser)
    xmlDoc = new DOMParser().parseFromString(xml, "text/xml");
else //IE <= 8
{
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.loadXML(xml);
}

document.getElementById('usa-map').onclick = function(e)
{
    if(e.target.tagName == 'path')
    {
        var counties = xmlDoc.getElementsByTagName('County');
        for(var i = 0; i < counties.length; i++)
        {
            if(e.target.id == counties[i].childNodes[0].nodeValue)
            {
                //we get TotalChildrenUnassigned
                document.getElementById('output').value = 'County "' + e.target.id + '" has ' +
                        counties[i].nextElementSibling.childNodes[0].nodeValue +
                        ' total children unassigned';
            }
        }
    }
};
<p>Please click on any shape below!</p>
<input id="output" type="text" style="width:400px;padding:3px;color:#000" disabled value="output"><br>
<svg id="usa-map" width="180" height="250" viewBox="0 0 180 250" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
    path{cursor:pointer}
    text{pointer-events:none}
    </style>
    <path d="M16,66L94,114V214L16,175z" id="Los Angeles" fill="#5b0"/>
    <path d="M94,114L172,66V175L94,214z" id="San Francisco" fill="#80f"/>
    <path d="M16,66L94,16L172,66L94,114z" id="San Diego" fill="#06d"/>
    <text x="23" y="125">Los</text>
    <text x="23" y="145">Angeles</text>

    <text x="105" y="125">San</text>
    <text x="105" y="145">Francisco</text>

    <text x="60" y="75">San Diego</text>
</svg>

推荐阅读