Question

如何根据投入资金的数量将现有数据添加到网页？我是 d3.js 的新手，我的任务是在flask和MongoDB的帮助下可视化世界地图上的数据。

所以我从MongoDB获取所有数据并使用Flask将其返回到新页面。这是我的代码。

MONGODB_HOST = 'localhost'
MONGODB_PORT = 27017
DBS_NAME = 'world_bank'
COLLECTION_NAME = 'bank_data'
FIELDS =  {'project_name': True, 'countryname': True, 'lendprojectcost': True, '_id': False}

@app.route('/home')
def world_bank_project():
    connection = MongoClient(MONGODB_HOST, MONGODB_PORT)
    collection = connection[DBS_NAME][COLLECTION_NAME]
    projects = collection.find(projection=FIELDS)
    json_project = []
    for project in projects:
        json_project.append(project)
    json_project = json.dumps(json_project, default=json_util.default)
    connection.close()
    return json_project

然后我有一个简单的页面，我需要显示世界地图并包含我拥有的数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data Visualization</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        d3.json('/home', function(error, data) {

            d3.select('body')
                .data(data)
                .enter()
                .append('p')
                .text(function (d) {
                    return d.countryname + d.project_name + d.lendprojectcost
                })
        })
    </script>
</body>
</html>

如何用d3.js构建一个等值区域图

0 个答案: