访问 d3.js 中的某些列答案

【问题标题】：Access certain columns in d3.js访问 d3.js 中的某些列
【发布时间】：2018-02-15 23:22:53
【问题描述】：

我正在从一个 csv 文件中导入数据，该文件包含一列字符串和一列数字。我想选择第二列，以便将其用于绘图，但我不知道如何。到目前为止，我有以下代码，它导入数据并解析它，但我不知道下一步该做什么。

d3.csv("food.csv", function(data) {
            return {
                Food : data.Food,
                Deliciousness : +data.Deliciousness
            };
        });

我的 csv 文件包含：

Food,Deliciousness
Apples,9
Green Beans,5
Egg Salad Sandwich,4
Cookies,10
Liver,0.2
Burrito,7

【问题讨论】：

看起来您的 csv 文件的第一行中有这些列标题，因此无需在函数体中重建对象。一旦文件被完全解析，回调函数就会被调用，用于清理数据并启动绘图步骤。在 bl.ocks.org 上搜索与您想做的类似的图表示例——比如这个...bl.ocks.org/mbostock/3885304
还有许多预构建的库可以获取您的数据并渲染 D3 图表（chartjs、plotly、highcharts、nvd3、dygraph，仅举几例）。但是，如果您真的想了解它们如何与 D3 一起工作，以便您可以设计自己的解决方案，这里是一个很好的起点：alignedleft.com/tutorials/d3/binding-data

标签： javascript csv d3.js

【解决方案1】：

我将在这里做一个疯狂的假设，但我认为您需要的是一个包含 CSV 文件右侧列中所有数字的数字数组。如果是这样，那么这段代码应该可以满足您的需求：

d3.csv(
  "food.csv", 
  (data) => ({
    Food: data.Food,
    Deliciousness: +data.Deliciousness
  }),
  (err, rows) => {
    const foodArray = rows.map((val) => val.Food);
    const deliciousnessArray = rows.map((val) => val.Deliciousness);
  }
);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【讨论】：