Javascript 如何使用d3和Ajax将文本动态附加到svg？

我对Ajax调用一无所知，已经阅读了几个小时了，但是所有的教程都提到了load方法和click之类的侦听器

我有一个函数drawThreat，它在我的svg上添加了一些图标，有一个包含大量x和Y的json文件，我所需要做的就是有一个ajax调用，它每5秒钟用json文件中的所有x和Y运行这个函数，并更新页面上的svg元素。以下是函数：

function drawThreat (x, y){
  var canvas = d3.select("#map")
                 .append("svg")
                 .attr("width", 500)
                 .attr("height", 500)
                 .attr("id", "Threat");

  var Threat = canvas.append('svg')
                    .append('text')
                    .attr('text-anchor', 'middle')
                    .attr('dominant-baseline', 'central')
                    .attr("x", x)
                    .attr("y", y)
                    .attr("class", "threat")
                    .style('font-family','FontAwesome')
                    .style('font-size','20px')
                    .style('fill', 'red')
                    .text(function (d) {
                    return '\uf2be'
                    });
        return Threat
};

---

任何帮助都将不胜感激：即使它是一个链接，指向您找到的与问题相关的教程。到目前为止，我看了6到7本教程，但运气不好。

如果我正确理解您的需求，您基本上可以获得类似于以下代码的代码：

var dataFileUrl = "url-to-your.json";          // assign the url to a variable
var canvas = d3.select("#map")                 // get a ref from the SVG element
                  .append("svg")               // you might want to define it only one time
                      .attr("width", 500)
                      .attr("height", 500)
                      .attr("id", "Threat");


var updateInterval = setInterval(function(){  
    d3.json(dataFileUrl , function (jsonData) { // AJAX call
        drawThreat(jsonData);                   // calls main function
    });                                    
},5000);                                        // every 5 * 1000ms 


function drawThreat (jsonData){ 
    canvas.selectAll('text.threat').remove();  // makes sure we don't have old icons
    canvas.selectAll('text')
        .data(jsonData)                        // for each set in json
            .enter()
                .append('text')                // create a text and append it to svg canvas
                .attr("class", "threat")       // with class of threat
                .attr("x", function (d) {  return d[0]; })  // first element of each set
                .attr("y", function (d) {  return d[1]; })  // second element of each set
                .text('\uf2be');                

 };

为了减少js代码，我建议使用CSS添加样式和属性：

.threat{                   
    text-anchor:middle;
    dominant-baseline:central;
    font-family:FontAwesome;
    font-size:20px;
    fill:red;
}

您还可以在此处看到它的作用：

---

希望它能帮助您理解这一点。

您能提供json文件的预览吗？json文件尚未制作，当前的目标是使用一组数据来伪造函数，如：{d1:[125250]，d2:[180250]，d3:[40115]}，当json文件中的某个x和Y被更新时，svg应该更新图标的位置而不刷新。现在我希望函数drawThreat每5秒运行一次，即使数据没有改变。。。希望我能做这么多！！我已经将您提供的代码放在一个函数中，并在我的文档中调用了该函数，但我得到了：uncaughttypeerror:canvas.selectAll….data….enter不是一个函数。。。。一遍又一遍。很高兴听到这个消息，它开始工作了！每当json文件出现问题时，它就会抛出该错误。。。再次感谢你的帮助！