Javascript 加载JSON和填充SVG取决于数据

我想填写一个国家，这取决于这个国家有多少在线用户。我有一个包含所有国家/地区的SVG文件，如果我有5个人在线，那么脚本应该将

id=“ca

填充为绿色。
我将数据存储在JSON格式的文件中

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

TypeError:svgMap未定义

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";
            }
        }   

    });
}); 

---

如果使用d3.js而不是JQuery生成SVG，您可能会更轻松。请参见此示例，与您希望执行的操作类似。

您需要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);
}

}

函数文本（）{
//svg是一个谷歌图表
var svg=document.getElementById（'graphic'）.getElementsByTagName（'svg'）[0]；
var parent=svg.contentDocument；
//将svg结构显示为DOM
console.log（父级）；
//查找标记填充并更改颜色并写入元素类型文本
对于（var i=0；i这是我的SVG，我只想加载SVG，更改国家颜色取决于有多少用户来自国家：P所以我应该获取这个SVG的DOM，然后从这个SVG获取一个国家的ID并填充一个新颜色。你能发布一个JSFIDLE你的工作吗？我猜一些基本的错误，比如找不到div blank_map或它没有contentDocument？@lan-这是我的SVG，这是我添加SVG的方式我不明白…现在我得到“ReferenceError:evt未定义svgDocument=evt.target.ownerDocument