个人中心
gpt4 book ai didi

javascript - d3.js 使用 python websocket 数据实时更新 svg 行

转载 作者：太空狗 更新时间：2023-10-30 01:26:43 25 4
gpt4 key购买 nike

我是 d3.js/javascript 和面向网络的编程的新手。

我的目标是通过 websocket 使用新值更新现有图表。

注意:在这个例子中，我已经有一个 javascript 数组“var”，我需要添加通过 websocket 获得的新值，但这不是强制性的，数组“var”也可以为空。我的目标是绘制通过 websocket ws 接收的数据。

我从 python websocket 服务器 (code1) 正确接收到值，但我仍然不明白如何在 d3.js 图形上绘制新元素。我阅读了几个关于更新模式示例的文档，例如 https://bl.ocks.org/mbostock/3808218但仍然没有使用 d3.js enter()/update() 获得有效的解决方案。 Code2 是一个工作示例加上 websocket 的 javascript 代码。我正确地获取了新数据并存储在 var“close”“when”中。谁能帮助修改 html 代码以绘制新数据？感谢您的帮助，问候。

代码 1:工作 python 服务器 websocket 

#!/usr/bin/env python
import asyncio
import datetime
import random
import websockets
import numpy as np
import json

IP = '192.168.10.224'
PORT = 5678


def format_time():
    t = datetime.datetime.now().time()
    s = t.strftime('%H:%M:%S.%f')
    return s[:-3]

async def time(websocket, path):
    while True:
        #now = datetime.datetime.utcnow().isoformat() + 'Z'
        data = {'datetime': str(format_time()),
                'ticker': 'ticker',
                'value': str(random.randint(100,1000)),
                'volume': str(random.randint(1,10))}
        await websocket.send(json.dumps(data))
        await asyncio.sleep(random.random() * 3)

start_server = websockets.serve(time, IP, PORT)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

代码2:html页面d3.js

<!DOCTYPE html>
 <meta charset="utf-8">
 <style> /* set the CSS */

 .line {
   fill: none;
   stroke: steelblue;
   stroke-width: 2px;
 }

 </style>
 <body>



    <!-- load the d3.js library -->
     <script src="d3/d3.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

     <script>

     //working websocket get new data and print for debug purpose on javascript console
     var ws = new WebSocket("ws://192.168.10.224:5678/")
     ws.onmessage = function (event) {
     var messages = document.getElementsByTagName('ul')[0],
         message = document.createElement('li'),
         content = document.createTextNode(event.data);
     //console.log(typeof(event.data));
     var obj = jQuery.parseJSON(event.data);
     var close = obj.volume
     var when = obj.datetime;
     console.log(close,when);
     };

     // set the dimensions and margins of the graph
     var margin = {top: 20, right: 20, bottom: 30, left: 50},
         width = 960 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;

     // parse the date / time
     var parseTime = d3.timeParse("%H:%M:%S.%L");

     // set the ranges
     var x = d3.scaleTime().range([0, width]);
     var y = d3.scaleLinear().range([height, 0]);

     // define the line
     var valueline = d3.line()
         .x(function(d) { return x(d.date); })
         .y(function(d) { return y(d.close); });

     // append the svg obgect to the body of the page
     // appends a 'group' element to 'svg'
     // moves the 'group' element to the top left margin
     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 + ")");


     var data = [
       {"date":"9:22:43.111","close":1.98},
       {"date":"10:22:43.222","close":5.98},
       {"date":"11:32:43.333","close":7.00},
       {"date":"11:52:43.444","close":8.70},
       {"date":"14:52:43.444","close":10.28},
       {"date":"15:52:43.444","close":16.70},
       {"date":"16:12:43.222","close":10.98},
       {"date":"16:12:43.222","close":3.44},
       {"date":"17:32:43.111","close":4.34},
     ];

     //per ogni elemento converto la data
     data.forEach(function(d) {
       d.date = parseTime(d.date);
       d.close = +d.close;
     }
     );


       // Scale the range of the data
       x.domain(d3.extent(data, function(d) { return d.date; }));
       y.domain([0, d3.max(data, function(d) { return d.close; })]);

       // Add the valueline path.
       svg.append("path")
           .data([data])
           .attr("class", "line")
           .attr("d", valueline);

       // Add the X Axis
       svg.append("g")
           .attr("transform", "translate(0," + height + ")")
           .call(d3.axisBottom(x)
             .ticks(d3.timeMinute.every(30))
     );

       // Add the Y Axis
       svg.append("g")
           .call(d3.axisLeft(y));


     </script>
     </body>

最佳答案

我的一个 friend 解决了这个问题!数据 block 已经在数组数据 drawline() 中，其他数据通过 websocket 和函数 updateLine() 被调用!请记住在 html 代码中更改本地 ip 地址。享受:)

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

</style>
<body>

<!-- load the d3.js library -->     
<script src="d3/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

//websocket get new data on close and when
var ws = new WebSocket("ws://192.168.1.118:5678/")
ws.onmessage = function (event) {
var messages = document.getElementsByTagName('ul')[0],
    message = document.createElement('li'),
    content = document.createTextNode(event.data);
//console.log(typeof(event.data));
    var obj = jQuery.parseJSON(event.data);
    var close = obj.volume
    var when = obj.datetime;
//  console.log(close,when);
    var a = {"date":parseTime(when),"close":close};
    data.push(a);
    console.log(data);
    updateLine(data);
};

// Preparo la prima sequenza di dati

var data = [
  {"date":"9:22:43.111","close":1.98},
  {"date":"9:23:43.111","close":2},
/*
  {"date":"10:22:43.222","close":5.98},
  {"date":"11:32:43.333","close":7.00},
  {"date":"11:52:43.444","close":8.70},
  {"date":"14:52:43.444","close":10.28},
  {"date":"15:52:43.444","close":16.70},
  {"date":"16:12:43.222","close":10.98},
  {"date":"16:12:43.222","close":3.44},
  {"date":"17:32:43.111","close":4.34},
*/
];

// parse the date / time
var parseTime = d3.timeParse("%H:%M:%S.%L");

//per ogni elemento converto la data
data.forEach(function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
});

// Esempio di riferimento per il funzionamento
//http://bl.ocks.org/d3noob/6bd13f974d6516f3e491

// d3js 
// Set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// Define the axes
var xAxis = d3.axisBottom(x)
    .ticks(d3.timeMinute.every(30));

var yAxis = d3.axisLeft(y);

// Define the line
var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

// funzione per prmo draw
function drawLine(line_data)
{
    // Scale the range of the data
    x.domain(d3.extent(line_data, function(d) { return d.date; }));
    y.domain([0, d3.max(line_data, function(d) { return d.close; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(line_data));

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
}

// funzione per aggiornamento
function updateLine(line_data)
{
    // Scale the range of the data
    x.domain(d3.extent(line_data, function(d) { return d.date; }));
    y.domain([0, d3.max(line_data, function(d) { return d.close; })]);

    // Select the section we want to apply our changes to
    var svg = d3.select("body").transition();

    // Make the changes
    svg.select(".line")   // change the line
            .duration(250)
            .attr("d", valueline(line_data));
    svg.select(".x.axis") // change the x axis
            .duration(250)
            .call(xAxis);
    svg.select(".y.axis") // change the y axis
            .duration(250)
            .call(yAxis);
}


// Disegno i primi dati
drawLine(data);

// Preparo la prima sequenza di dati
/*
var data = [
  {"date":"9:22:43.111","close":2.98},
  {"date":"10:22:43.222","close":3.98},
  {"date":"11:32:43.333","close":4.00},
  {"date":"11:52:43.444","close":7.70},
  {"date":"14:52:43.444","close":11.28},
  {"date":"15:52:43.444","close":15.70},
  {"date":"16:12:43.222","close":12.98},
  {"date":"16:12:43.222","close":2.44},
  {"date":"17:32:43.111","close":1.34},
];

// parse the date / time
var parseTime = d3.timeParse("%H:%M:%S.%L");

//per ogni elemento converto la data
data.forEach(function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
});

// Aggiorno i dati
updateLine(data);
*/
</script>
</body>

关于javascript - d3.js 使用 python websocket 数据实时更新 svg 行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42773024/

25 4 0
文章推荐： python - 将 python 脚本作为 systemd 服务运行
文章推荐： c# - 不将日期属性设置为对象会导致错误
文章推荐： c# - Winforms 应用程序的报告生成器选项？
文章推荐： c# - 使用 C# 发送加密和签名的电子邮件
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com