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

Question

哈!伙计们
首先，请原谅我的英语不好(我正在努力)。第二:我对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);

我的 csv 文件是这样的:
地区、评价
1,90
2,80
...
22,70
请告诉我如何获取加载到页面的评估编号并将其替换为“评估位置”？？？ 看一下快照就可以清楚地看到:

Answer 1

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

首先，用 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>