将圆圈移动到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使用它。