How to dynamically append text to svg using d3 and Ajax?

Question

I'm clueless on Ajax calls, have been reading on them for a few hours, but all of the tutorials mention load method and a listener like click.

I have a function (drawThreat) that adds some icons (fontawesome) on my svg, there is a json file with a bunch of x and ys, all I need to do is to have an ajax call that runs this function with all of the x and ys in the json file every 5 seconds and updates the svg element on the page. Here is the function:

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

Any help would be appreciated:) even if it is a link to a tutorial you find related to the question. I looked at 6 or 7 tutorials so far with no luck.

Answer 1

You basically can have a code similar to the below one if I understood your need correctly :

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');                

 };

to reduce js codes I suggest adding styles and attributes using CSS:

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

You can also see it in action here : https://codepen.io/FaridNaderi/pen/awPBwm

Hope it helps you to get the point.