嘿伙计们，目前我正在尝试使用 d3js 绘制实时图表。我正在使用 esp8266 和 dht11 传感器将温度值发送到 mysql 数据库。我能够从 mysql 获取数据并使用 d3js 绘制它。但是我必须不断刷新页面才能更新图表。如何在不刷新页面的情况下持续更新图表？或使其成为实时.....我是 d3js 的新手.....任何人都可以给我一个在 d3js 中使用此类功能的示例吗？........................(我不想使用 pubnub 或其他库......我想学习纯粹用 d3js 来做)
这些是我正在使用的代码
<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>php文件-----data.php
<?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);
?>传感器.php---
<?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";
}
?>最佳答案
研究使用 websocket。由于您使用的是 php，我建议您查看 Ratchet 。您不能纯粹在 d3 中执行此操作，因为它没有 Web 套接字模块。
关于javascript - 使用 mysql 和流传感器数据绘制 d3 实时图形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41073771/