Question

我想填写一个国家/地区取决于这个国家/地区有多少用户在线。我有SVG文件，其中包含所有国家/地区，例如来自加拿大的我有5个人在线，然后脚本应将id="ca填入绿色。
我将数据存储在JSON格式的文件中。

我在控制台中遇到的错误是：

TypeError: svgMap is undefined

var mapElement = svgMap.getElementById(iso).style.fill="#94d31b";
$(document).ready(function() 
{ 
    $.getJSON("results.json", function(data) 
    {
        data = data.iso_countries;
        var map = document.getElementById("blank_map");
        var svgMap = map.contentDocument;

        for(var key in data)
        {
            var iso = data[key].country;
            var visitors = data[key].visitors;

            if( visitors > 1 && 50>=visitors)
            {
                var mapElement = svgMap.getElementById(iso).style.fill="#94d31b";
            }
            else if( visitors > 50 && 500>=visitors)
            {
                document.getElementById("iso").style.fill="#94d31b";
            }
        }   

    });
});

Answer 1

如果使用d3.js生成SVG而不是JQuery，则可能会更容易。请参阅此示例，类似于您要执行的操作。 http://bl.ocks.org/mbostock/5912673

Answer 2

您需要使用NameSpace for javascript，处理标签以附加新标签或更新标签

 function Text(){
      //svg is a google chart
      var svg = document.getElementById('graphic').getElementsByTagName('svg')[0];  
      var parent = svg.contentDocument;
      //show me structure svg as DOM
      console.log(parent);

      //find tag fill and change color and write element type text

for(var i=0; i<svg.childNodes[4].childNodes[1].childNodes[1].childElementCount; i++) {
    var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');  
    var child = svg.childNodes[4].firstChild.nextSibling.firstChild.nextSibling.firstChild; 
    text.setAttribute('x', child.getAttribute('x'));
    text.setAttribute('y', child.getAttribute('y'));
    text.setAttribute('fill', '#000000');
    text.setAttribute('dy', '-2');      
    text.textContent = 'Hell0'; 
    parent.removeChild(child);
    g.appendChild(child);   
    g.appendChild(text);
    parent.appendChild(g);
}

}

我希望它可以帮到你

加载JSON并填充SVG取决于数据

2 个答案: