d3とAjaxを使ってsvgにテキストを動的に追加する方法は？

Question

私はAjaxの呼び出しには無頓着ですが、数時間読んでいますが、すべてのチュートリアルではloadメソッドとclickのようなリスナーについて触れています。

私はsvgにいくつかのアイコン（fontawesome）を追加する関数（drawThreat）を持っています.xsonとysの束を持つjsonファイルがあります。この関数を実行するajax呼び出しが必要ですjsonファイル内のxとyのすべてを5秒ごとに更新し、ページ上の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のチュートリアルを見ていましたが、運がありません。

Answer 1

私が正しくあなたの必要性を理解している場合は、基本的に1以下のようなコードを持つことができます。

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

}; 

を私はスタイルを追加し、CSSを使用して属性を示唆jsのコードを減らすために：

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

あなたはここに実際にそれを見ることができます：https://codepen.io/FaridNaderi/pen/awPBwm

希望を得るのを助けることを望みます。