当我将输入值与 csv 列进行比较时，为什么会得到未定义的值

Question

我有一个问题，我相信你们很多人都可以解决它，我的目标是将我的输入值与 CSV 列进行比较，稍后，如果比较为真，将跟踪图表。但是我在这部分苦苦挣扎，每次我console.log我的输入值时，它都会说它的undefined。 我确定这是与 Promise 相关的问题，但我找不到有效的解决方案。

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>

Answer 1

如果我用任何其他 CSV 文件替换您的文件，我会打印出 x 的输入值 - 但从您的 cmets 看来，您实际上是在寻找输入名称为 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>