円をd3.jsの新しい座標に移動

Question

プログラミングが初めてです。私はタグを使って屋内マップのようなものを作成しようとしていました。私の質問は、ページをリロードせずにデータベースが更新されるたびに地図上のタグを更新する方法です。

はここにあなたの種類の答え ありがとうございコードの一部です：

<div id ="main" class="container"> 
    <div class = "row"> 
     <div id="map" class = "pull-left map"></div> 
        <?php 
         $tag_locations = array(); 

         $sql = "SELECT activity_record.tag_id, employee.first_name, activity_record.x_coor, activity_record.y_coor, tag.tag_color, activity_record.timestamp FROM activity_record, tag, employee WHERE activity_record.tag_id = tag.tag_id && tag.employee_id = employee.employee_id && activity_record.timestamp = (SELECT MAX(t2.timestamp) FROM activity_record t2 WHERE t2.tag_id = activity_record.tag_id)"; 

         $tag_result = $conn->query($sql); 
          while($tag_record =mysqli_fetch_assoc($tag_result)){ 

          $tag_locations[] = $tag_record; 

         } 

        ?> 

        <script type="text/javascript"> 
         var data = <?php echo json_encode($tag_locations); ?>; 

         var svg = d3.select("#map").append("svg") 
         .attr("width", 700) 
         .attr("height", 450); 
         var g = svg.append("image") 
           .attr("xlink:href", "resources/images/map3.png") 
           .attr("width", 700) 
           .attr("height", 450) 
           .attr("x", 0) 
           .attr("y", 0); 



         var circle = svg.selectAll("circle") 
         .data(data) 

         .enter().append("circle") 
         .attr("cx", function(d) {return d.x_coor;}) 
         .attr("cy", function(d) {return d.y_coor;}) 
         .attr("r", 11) 
         .style("fill", function(d) {return d.tag_color;}); 


         $('svg circle').tipsy({ 
          gravity: 'w', 
          html: true, 
          title: function() { 
           var d = this.__data__; 
           return '<span style="color :' + d.tag_color + '">' + d.first_name + '</span>'; 
          } 
         }); 
        </script> 

Answer 1

あなたは、データベースの変更をチェックし、定期的にバックエンド（PHP？）をポーリングする必要があります。これは、AJAXリクエストを介して行うことになります。

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

AJAXは、非同期JavascriptとXMLにちなんで命名されていても、JSONでそれを使用するのは非常に一般的です。