javascript - 当我将输入值与 csv 列进行比较时,为什么会得到未定义的值
问题描述
我有一个问题,我相信你们中的很多人都可以解决它,我的目标是将我的输入值与 CSV 列进行比较,然后,如果比较为真,将跟踪图表。但是我在这部分苦苦挣扎,每次console.log
我输入值时,它都会显示它的undefined
. 我确定这是与承诺有关的问题,但我找不到有效的解决方案。
function myFunction() {
const selectedFile = document.getElementById("myFile").files[0];
d3.csv(selectedFile.name)
.then(function(players, data) {
var y = document.getElementById("yLabel").value;
var x = document.getElementById("xLabel").value;
document.getElementById("y_one").innerHTML = y;
document.getElementById("x_one").innerHTML = x; // HERE X OR Y ARE DEFINED
console.log("take this value " + x);
const playerLabels = players.map(function(d) {
console.log(x); //HOWEVER IN THIS PART , IT SAYS IS UNDEFINED
return d.x;
});
console.log(playerLabels);
const weekData = players.map(function(d) {
console.log("lol");
return d.Weeks;
});
var chart = new Chart("chart", {
type: "horizontalBar",
options: {
maintainAspectRatio: false,
legend: {
display: false,
},
},
data: {
labels: playerLabels,
datasets: [{
data: weekData,
}, ],
},
});
});
}
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<p>
Please enter x axis and y axis correctly, else you wouldnt get correct graph
</p>
x labels :
<input type="text" id="xLabel" /> y labels :
<input type="text" id="yLabel" />
<input type="file" id="myFile" multiple size="50" />
<button onclick="myFunction()">Generate graph</button>
<p id="y_one"></p>
<p id="x_one"></p>
<canvas id="chart"></canvas>
解决方案
如果我用任何其他 CSV 文件替换您的文件,我确实会得到 print 的输入值x
- 但从您的评论看来,您实际上是在寻找输入名称为x
.
在这种情况下,使用d[x]
,而不是d.x
。前者评估变量 x 并获取名称与其值匹配的列。后者不评估并获取名称为“x”的列。
在下面的示例中,正确的值是“source”、“target”和“value”,它们不会给出未定义值的数组!
function myFunction() {
const selectedFile = "https://static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27energy.csv";
d3.csv(selectedFile)
.then(function(players, data) {
var y = document.getElementById("yLabel").value;
var x = document.getElementById("xLabel").value;
document.getElementById("y_one").innerHTML = y;
document.getElementById("x_one").innerHTML = x;
console.log("take this value " + x);
const playerLabels = players.map(function(d) {
return d[x];
});
console.log(playerLabels);
const weekData = players.map(function(d) {
return d.Weeks;
});
var chart = new Chart("chart", {
type: "horizontalBar",
options: {
maintainAspectRatio: false,
legend: {
display: false,
},
},
data: {
labels: playerLabels,
datasets: [{
data: weekData,
}, ],
},
});
});
}
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<p>
Please enter x axis and y axis correctly, else you wouldnt get correct graph
</p>
x labels :
<input type="text" id="xLabel" value="source" /> y labels :
<input type="text" id="yLabel" />
<button onclick="myFunction()">Generate graph</button>
<p id="y_one"></p>
<p id="x_one"></p>
<canvas id="chart"></canvas>
推荐阅读
- c# - 来自文件的 xml 数据 POST
- .htaccess - apache 2.4中的htaccess重定向301不起作用
- assembly - MIPS 程序集中的 C++ 数组
- javascript - 使 Swiper Slider 的过渡单向
- jquery - 如何隐藏 DataTables 中某些列的输入字段?
- opengl - 创建带纹理的矩形失败
- php - 获取模态 PHP HTML 中的值
- vue.js - 如何从 mixins 访问 Vue 实例?
- xaml - Xamarin Forms Listview 圆角单元格突出显示灰色
- javascript - 为什么这个功能不起作用?显示 null 的错误