从javascript中的csv文件读取数据_Javascript_Csv_D3.js

从javascript中的csv文件读取数据

javascript csv d3.js

从javascript中的csv文件读取数据,javascript,csv,d3.js,Javascript,Csv,D3.js,我试图通过csv数据在地图上画点。在csv中，我有纬度和经度字段。。。我该怎么做？也许从csv获取一个数组并使用它？我试了很多东西，但都没用这是我的密码：函数初始化{ var earth=新的WE.map'earth_div'； WE.tileLayer'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'.addToearth； //获取csv文件数据，创建新标记[纬度，经度] //绑定弹出窗口将获得字段国家/地区对于var i=

我试图通过csv数据在地图上画点。在csv中，我有纬度和经度字段。。。我该怎么做？也许从csv获取一个数组并使用它？我试了很多东西，但都没用

这是我的密码：

函数初始化{ var earth=新的WE.map'earth_div'； WE.tileLayer'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'.addToearth； //获取csv文件数据，创建新标记[纬度，经度] //绑定弹出窗口将获得字段国家/地区对于var i=0；i<5；i++ { var marker=WE.marker[i，i].addToearth； marker.bindpop删除数据。，{maxWidth:150，closeButton:true}.closePopup； }//我的结局 var markerCustom=WE.marker[50，-9]，'/img/logo-webglearth-white-100.png'，100,24.addToearth； setView[0,0]，3； } html，正文{ 填充：0；保证金：0；背景色：黑色； } 地政处{ 排名：0；右：0；底部：0；左：0；位置：绝对！重要； } WebGL地球API：标记这对你有用吗？用按钮选择csv文件，脚本将在页面上显示它

index.html：

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://www.webglearth.com/v2/api.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            background-color: black;
        }

        #earth_div {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            position: absolute !important;
        }
        #files {
            top: 0;
            left: 0;
            position: absolute;
            z-index: 999;
        }
    </style>
    <title>WebGL Earth API: Markers</title>
</head>
<body>
    <input type="file" id="files" name="file" />
    <div id="earth_div"></div>
    <script>
        var earth = new WE.map('earth_div');
        WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(earth);
        var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);
        earth.setView([0, 0], 3);
        document.getElementById('files').onchange = function() {
            readFile();
        };
        function readFile() {
            var files = document.getElementById('files').files;
            if (!files.length) {
              alert('Please select a file!');
              return;
            }
            var file = files[0];
            var start = 0;
            var stop = file.size - 1;
            var reader = new FileReader();
            reader.onloadend = function(evt) {
                if (evt.target.readyState == FileReader.DONE) {
                    var text = evt.target.result;
                    var lines = text.split('\n');
                    for (var i = 0; i < lines.length; i++) {
                        lines[i] = lines[i].split(',');
                        lines[i].map(function(val) {
                            return Number(val);
                        });
                    }
                    for (var i = 0; i < lines.length; i++) {
                        var marker = WE.marker([lines[i][0], lines[i][1]]).addTo(earth);
                        marker.bindPopup("<b>The data </b><br><a target=_blank href='http://www.google.com'>link</a>.<br />"
                            , { maxWidth: 150, closeButton: true }).closePopup();
                    }
                }
            }
            var blob = file.slice(start, stop + 1);
            reader.readAsBinaryString(blob);
        }
    </script>
</body>
</html>

我想你必须制作一个数组，按照地图中用于线协调的特殊数字排序，并将它们调用到你的地图中。你能为我写一个代码吗？我不知道怎么。。。你可以看看这个，我看到了。。但是对我来说什么都不管用..d3.csvmycsv.csv，函数d{d['latitude']=+d['latitude']；var marker=WE.marker[d['latitude']，66].addToearth；marker.bindpop上传数据。是的！谢谢！现在，我可以在没有文件选择器的情况下加载我的文件吗？我的文件名是mycsv2.csv，我从中整理了cols纬度和经度。您可以向该文件发出ajax请求并显示它。我知道如何在csv中调用所需的COL。但是我如何才能自动加载该文件呢我不知道如何使用ajax..var xhttp=new XMLHttpRequest；xhttp.onreadystatechange=function{if this.readyState==4&&this.status==200{console.logthis.responseText；}；xhttp.openGET，FILE，true；xhttp.send；如果您在计算机上托管文件，它将不起作用。

1,1
2,2
3,3
4,4