Question

嘿伙计目前我正在尝试使用d3js绘制实时图表。我正在使用esp8266和dht11传感器将温度值发送到mysql数据库。我能够从mysql中获取数据并使用d3js绘制它。我必须不断刷新页面以更新图形。如何在不刷新页面的情况下连续更新图形？或者让它成为实时.....我是d3js的新手.....任何人都可以给我一个在d3js中使用这种功能的例子吗？...............（i不想使用pubnub或其他库....我想学习纯粹在d3js中做到这一点）

这些是我正在使用的代码

＆＃13;

<html>
<head>
<title>Temperature</title>

<style>

  .axis path,
  .axis line{
    fill: none;
    stroke:blue;
  }

  .line{
    fill: none;
    stroke: green;
    stroke-width: 1.5px;
    
  }
 

  .tick text{
    font-size: 12px;
  }

  .tick line{
    opacity: 0.8;
  }

</style>

<script src="https://d3js.org/d3.v3.js"></script>

</head>

<body>
<script>
//setting marging,height and width for the graph drawing area
var margin = {top: 20, right: 20, bottom: 200, left: 50},
    width = 1280 - margin.left - margin.right,
    height = 720 - margin.top - margin.bottom;




 //getting data from sensors using data.php which encoded the data to jason format...so we calling the json data here
 d3.json("data.php", function(error, data) {
     var k = [];  
   data.forEach(function(d) {
        d.event = d.event;
        d.sensor2 = +d.sensor2; 
        k.push(d.event)
      
    });


//defining x
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width])
    .domain(k);

//defining y 
var y = d3.scale.linear()
    .range([height, null])
    .domain([0, d3.max(data, function(d) { return d.sensor2; })])



//defining the x Axes   
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .innerTickSize(-height)
    .outerTickSize(0)
    .tickPadding(5);


//defining the y Axes
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .innerTickSize(-width)
    .outerTickSize(0)
    .tickPadding(5);

// defining the line and drawing the line by  returning the x and y values 
var line = d3.svg.line()
    .x(function(d) { return x(d.event); })
    .y(function(d) { return y(d.sensor2); })
    

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


  svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line)
    

//making the xAxes
  svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.70em")
            .attr("dy", ".70em")
            .attr("transform", function(d) {
                return "rotate(-65)" 
                });
//making the yAxes
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)

});
</script>
</body>
</html>

＆＃13;

php文件----- data.php

＆＃13;

<?php
header('Content_Type:application/json');
define('localhost','127.0.0.1');
define('DB_USERNAME','root');
define('DB_PASSWORD','skyline');
define('DB_NAME','arduino');
$mysqli=new mysqli(localhost,DB_USERNAME,DB_PASSWORD,DB_NAME);
if(!$mysqli){
	die("Connection failed:".$mysqli->error);
}
$query =sprintf("SELECT id,sensor1,sensor2,sensor3,event FROM tbard ORDER BY id");
$result =$mysqli->query($query);

$data =array();
foreach($result as $row){
	$data[]=$row;
}
$result->close();
$mysqli->close();
print json_encode($data);
?>

＆＃13;

sensors.php ---

＆＃13;

<?php
   include("conn.php");
   
   $sensor1 =$_GET['sensor1'];
   $sensor2 =$_GET['sensor2'];
   $sensor3 =$_GET['sensor3'];
   
   $sql_insert="insert into tbard (sensor1,sensor2,sensor3)values('$sensor1','$sensor2','$sensor3')";
   
   mysql_query($sql_insert);
   
   if($sql_insert){
	   echo"insert success";
   }else{
	   echo "insert not success";
   }
   
?>

＆＃13;

Answer 1

查看使用websockets。由于您使用的是php，我建议您查看Ratchet。你不能完全在d3中这样做，因为它没有网络套接字模块。

d3使用mysql和流传感器数据进行实时图形绘制

1 个答案: