个人中心
gpt4 book ai didi

javascript - 创建一个包含 Node.js、MongoDb 和 D3.js 的 Web 应用程序

转载 作者：行者123 更新时间：2023-11-30 11:22:04 25 4
gpt4 key购买 nike

<分区>

我想构建一个 Web 应用程序来显示来自某些站点的数据。为此，我考虑通过网络抓取来自动收集数据。所以我从这些站点获取数据，根据自己的喜好格式化它们并将它们保存在 MongoDb 上。

所以现在我想使用 D3.js 查看此数据。这不是我第一次使用 D3，但这是我第一次拥有使用 Node.js 和 MongoDb 的应用程序。我通常在 .csv 文件中有一些数据，并使用 HTML、CSS、Javascript 和 D3.js 构建简单的图表。通常我在 D3 中的项目具有以下结构:

index.html:

<html lang="en">

<head>
   <meta charset="utf-8">
   <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
   <script src="https://d3js.org/topojson.v2.min.js"></script>
   <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="./heatmap.css" media="screen"/>
</head>

<body>
   <div id="container">
      <div id="container-heatmap"></div>
      <div id="container-sparkline"></div>
   </div>
   <div id="container-legend"></div>
   <script src="./heatmap.js"></script>
</body>

</html>

heatmap.js:

var margin = {top: 50, right: 20, bottom: 20, left: 210};
var width = 850 - margin.right - margin.left;
var height = 430 - margin.top - margin.bottom; //400

var svg = d3.select('#container-heatmap')
    .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 + ")");

// some code...

// load data files
d3.queue()
    .defer(d3.csv, './data.csv')
   .await(createHeatmap);

function createHeatmap(error, data) {
    if(error) {
      console.log("*** Error loading files: " + error + " ***");
      throw error;
   }

   // some code...

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .selectAll('text')
        .attr('font-weight', 'normal');

    svg.append("g")
        .attr("class", "x axis")
        .call(xAxis)
        .selectAll('text')
        .attr('font-weight', 'normal')
        .style("text-anchor", "start")
        .attr("dx", ".8em")
        .attr("dy", ".5em")
        .attr("transform", function(d) {
            return "rotate(-65)";
        });
}

heatmap.css:

#container {
    background-color: pink;
    width: 100;
    height: 100%;
}

// come code...

现在，我在 Node.js 中创建了一个应用程序，它执行网页抓取并将数据保存在 MongoDB test 集合中。

这是我的项目结构:

data
helpers
 |_ util.js = file that contains useful functions for different files (for example: printOnFile)
middlewares
 |_ mongolib.js = file that contains functions that are used to interact with the database. For example: connectToDb(), disconnectFromDb(), insert(), find(), ...
models
node_modules
output
 |_ data.json = file that contains the data saved on the db. Before inserting data on the db, I save them also on file. This file has this structure:
    [
        {To: 'aa1', B: 'bb1', C: 'cc1'},
        {To: 'aa2', B: 'bb2', C: 'cc2'},
        {To: 'aa3', B: 'bb3', C: 'cc3'},
        {To: 'aa4', B: 'bb4', C: 'cc4'},
        ...
    ]
routers
 |_ scraper.js = file that contains useful functions for doing web scraping

app.js = main file of the app
package.json
package-lock.json

app.js 就像这样:

// import some packages and some my files
var mongolib = require('./middlewares/mongolib.js');
var scrape = require('./routers/scraper.js');

const mainApp = async function() {
    const conn = await mongolib.connectToDb(); // init: connect to db and create collection test
    await scrapeSiteAndSaveData(); // get data
    await mongolib.disconnectFromDb(); // disconnect from MongoDb
    await console.log('DATA VIZ'); // data visualization here?
    return 'end';
}

mainApp()
    .then(res => console.log(res)) 
    .catch(err => console.log(err)); 

async function scrapeSiteAndSaveData() {
    await scrape.downloadAndSave();
}

所以，目前，我只有后端部分。如何合并前端部分(与 D3.js 中的图形可视化相关的部分)？

应该在哪个文件夹中创建新文件？他们应该有什么样的结构？我没有找到涵盖该主题的教程。我找到的唯一一个是this但它没有多大帮助。创建此类应用程序的最佳方式是什么？有没有更好遵循的标准？

谢谢!

25 4 0
文章推荐： java - Glassfish SSE 未成功将事件发送到浏览器 EventSource(最新的 Chrome)
文章推荐： java - 以前工作的 Java servlet 现在在 'Clean' 之后不再工作 - Tomcat v7.0 和 Eclipse
文章推荐： java - Jsoup - 使用字符集 iso-8859-1 解析 HTML 文件
文章推荐： javascript - React JS - 未捕获的类型错误 : props. video.map 不是函数
行者123
个人简介

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

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