Я относительно новичок в node.js и d3. js. Я пытаюсь импортировать данные весовой ячейки из arduino uno через node.js, serialport и socket.io и хочу отобразить их на гистограмме d3. js, которая будет обновлять гистограмму каждые 15 минут.
Моя проблема в том, что я не могу получить данные в моем массиве визуализации. Я могу console.log, но когда я даю массиву параметр, он говорит, что он не определен. На данный момент я не знаю, в чем проблема и надеюсь на подсказки.
Это мой код для Arduino:
#include "HX711.h"
#define calibration_factor -767.4
#define DOUT 3
#define CLK 2
HX711 scale;
void setup() {
Serial.begin(9600);
scale.begin(DOUT, CLK);
scale.set_scale(calibration_factor);
scale.tare();
}
void loop() {
Serial.print(scale.get_units(), 1);
Serial.println();
delay(5000);
}
Это мой код файла javascript для node.js:
var express = require('express');
var app = express();
var server = app.listen(4000, () => {
console.log("Listening to requests on port 4000...");
})
var io = require('socket.io')(server);
app.use(express.static(__dirname + '/public'));
io.on('connection', onConnection);
var connectedSocket = null;
function onConnection(socket){
connectedSocket = socket;
}
const SerialPort = require('serialport');
const Readline = SerialPort.parsers.Readline;
const port = new SerialPort('COM3');
const parser = port.pipe(new Readline());
parser.on('data', function (data) {
io.emit('data', { data: data });
});
И код моего html документа с диаграммой:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Live Data!</title>
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<h1>Live Arduino Data from XX</h1>
<div id="chart"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:4000'); //connect to server
socket.on('data', function(temp) { //Read data
barData.push(temp.data);
console.log(barData);
});
let margin = {
top: 30,
right: 30,
bottom: 50,
left: 50
}
const width = 1200 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3
.select('#chart')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.style('background', '#999999')
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
var barData = [];
console.log(barData);
let barOffset = 5;
let barWidth = 50;
const n = 5;
let yScale = d3
.scaleLinear()
.domain([0, d3.max(barData)])
.range([height, 0]);
let yAxis = d3
.axisLeft(yScale)
let xScale = d3
.scaleBand()
.domain(d3.range(0, n))
.rangeRound([0, width], barOffset);
let xAxis = d3
.axisBottom(xScale)
.tickValues([0, 20, 40, 60, 80, 99]);
let colors = d3
.scaleLinear()
.domain([0, barData.length * 0.33, barData.length * 0.66, barData.length])
.range(['#FFB832', '#C61C6F', '#268BD2', '#85992C']);
let chart = svg
.selectAll('rect')
.data(barData)
.enter()
.append('rect')
.style('fill', function(d, i){
return colors(i);
})
.style('stroke', 'black')
.attr('width', xScale.bandwidth())
.attr('height', 0)
.attr('x', function(d, i){
return xScale(i);
})
.attr('y', height);
chart.transition()
.attr('height', function(d){
return yScale(d);
})
.attr('y', function(d){
return height - yScale(d);
})
.delay(function(d, i){
return i * 20;
})
.duration(1000)
.ease(d3.easeElastic);
svg
.append('g')
.attr('class', 'yAxis')
.call(yAxis);
</script>
</body>
</html>