gpt4 book ai didi

javascript - 如何在 JavaScript 中使用从 csv 文件加载的数据?

转载 作者:行者123 更新时间:2023-12-03 10:56:55 25 4
gpt4 key购买 nike

哈!伙计们
首先,请原谅我的英语不好(我正在努力)。第二:我对JavaScript一无所知,只是随意复制这段代码。所以请耐心听听我的情况。

我有一个 svg map ,当您单击每个部分时,会出现一个框,显示该地区的名称和地区的评估。我已经解决了该地区的名称部分:

for (var i = 0; i < regions.length; i++){
.... some line codes ....
$infobox.find('.infobox_title').text(this.data('region_name'));
.... some line codes ....

现在我想从加载到页面的 csv 文件中获取评估值:

function loadFile(event) {
alasql('SELECT * FROM FILE(?,{headers:true})',[event],function(data){
var myseries = [];
Object.keys(data[0]).forEach(function(key){
var ds = data.map(function(d){ return +d[key];});
myseries.push({name:key,data:ds});
});
});
}

我确定数据已加载到页面,因为我检查了控制台日志:

console.log(key);
console.log(ds);

center我的 csv 文件是这样的:
地区、评价
1,90
2,80
...
22,70

请告诉我如何获取加载到页面的评估编号并将其替换为“评估位置”???看一下快照就可以清楚地看到: center

最佳答案

您可以尝试使用此代码将标签放在图像顶部。

首先,用 HTML 格式的 map 准备图像,并用容器 DIV 元素覆盖它:

<div id="container">
<img src="map.jpg" style="position:absolute; top:0px; left:0px;"/>
</div>

然后创建新的标签元素,添加样式属性(位置、内容、颜色等)并将其附加到其顶部的容器(查看“position:absolute”样式元素):

var container = document.getElementById('container');

// Create new element dinamically
var lb = document.createElement('div');
lb.innerHTML = '<b>'+d.regionid+'</b><br/>'+d.evaluation;
lb.style.position = "absolute";
lb.style.left = regions[d.regionid-1].x+"px";
lb.style.top = regions[d.regionid-1].y+"px";

// Append new element to container
container.appendChild(lb);

请参阅下面或 jsFiddle 中的工作片段

评论:

  1. 我没有在示例中包含读取 CSV 代码(因为您已经加载了它)。
  2. 该示例未使用 d3.js 库。

如果这些条件很重要,请发表评论。

var data = [
{regionid:1,evaluation:90},
{regionid:2,evaluation:80},
{regionid:3,evaluation:70},
{regionid:4,evaluation:60},
{regionid:5,evaluation:50},
{regionid:6,evaluation:40},
{regionid:7,evaluation:30},
];

var regions = [
{x:110,y:100},
{x:220,y:100},
{x:250,y:180},
{x:250,y:230},
{x:290,y:220},
{x:150,y:160},
{x:350,y:180},
];

var container = document.getElementById('container');

for(var i=0; i<data.length; i++) {
var d = data[i];

var lb = document.createElement('div');
lb.innerHTML = '<b>'+d.regionid+'</b><br/>'+d.evaluation;
lb.style.position = "absolute";
lb.style.left = regions[d.regionid-1].x+"px";
lb.style.top = regions[d.regionid-1].y+"px";
lb.style.backgroundColor = "white";
lb.style.textAlign = "center";
container.appendChild(lb);
};
<div id="container">
<img src="https://pbs.twimg.com/media/B8woY_DCMAEojTy.jpg" style="position:absolute; top:0px; left:0px;"/>
</div>

关于javascript - 如何在 JavaScript 中使用从 csv 文件加载的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28234004/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com