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

Question

ħ！专家
首先，请原谅我的英语不好（我正在努力）。第二：我对JavaScript一无所知，并且通过和平复制这段代码。请耐心等待，听听我的情况。

我有一个svg地图，当你点击每个sectoin时，会出现一个框，显示该地区的名称和地区的评估。我已经用以下方法解决了该地区的名称部分：

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

现在我想从使用以下命令加载到页面的csv文件中获取Evaluation的值：

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中的地图准备图像，并用容器DIV元素覆盖它：

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

然后创建新的标签元素，添加样式属性（位置，内容，颜色等）并将其附加到容器顶部（查看＆＃34; position：absolute＆＃34;样式元素）：

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库。

如果这些条件很重要，请评论。

＆＃13;
＆＃13;
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);
};
＆＃13;
<div id="container">
    <img src="https://pbs.twimg.com/media/B8woY_DCMAEojTy.jpg" style="position:absolute; top:0px; left:0px;"/>
</div>
＆＃13;
＆＃13;
＆＃13;