Javascript 行函数在D3多系列折线图中做什么？

我正试图根据Mike Bostock的示例，用D3制作多系列折线图：

我很难理解加载data.tsv文件后会发生什么，特别是“type”函数。它似乎解析数据并将温度字符串转换为数字。但它还能做什么？为什么它是必要的

function type(d, _, columns) {
  d.date = parseTime(d.date);
  for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
  return d;
}

函数类型（d，u，列）{
d、 日期=解析时间（d.日期）；
对于（var i=1，n=columns.length，c；i

以下是完整的代码：

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%Y%m%d");

var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

d3.tsv("data.tsv", type, function(error, data) {
  if (error) throw error;

  var cities = data.columns.slice(1).map(function(id) {
    return {
      id: id,
      values: data.map(function(d) {
        return {date: d.date, temperature: d[id]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); })
  ]);

  z.domain(cities.map(function(c) { return c.id; }));

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Temperature, ºF");

  var city = g.selectAll(".city")
    .data(cities)
    .enter().append("g")
      .attr("class", "city");

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return z(d.id); });

  city.append("text")
      .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("dy", "0.35em")
      .style("font", "10px sans-serif")
      .text(function(d) { return d.id; });
});

function type(d, _, columns) {
  d.date = parseTime(d.date);
  for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
  return d;
}

var svg=d3.选择（“svg”），
边距={顶部：20，右侧：80，底部：30，左侧：50}，
宽度=svg.attr（“宽度”）-margin.left-margin.right，
高度=svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var parseTime=d3.timeParse（“%Y%m%d”）；
var x=d3.scaleTime（）.range（[0，宽度]），
y=d3.scaleLinear（）.range（[height，0]），
z=d3.scaleOrdinal（d3.schemeCategory 10）；
var line=d3.line（）
.曲线（d3.曲线基）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.温度）；}）；
d3.tsv（“data.tsv”），类型，功能（错误，数据）{
如果（错误）抛出错误；
var cities=data.columns.slice（1）.map（函数id）{
返回{
id:id，
值：data.map（函数（d）{
返回{date:d.date，temperature:d[id]}；
})
};
});
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 领域([
d3.min（城市，函数（c）{返回d3.min（c.values，函数（d）{返回d.temperature；}）；}），
d3.max（城市，函数（c）{返回d3.max（c.values，函数（d）{返回d.temperature；}）；}）
]);
z、 域（cities.map（函数（c）{return c.id；}））；
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.呼叫（d3.左（y））
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.71em”）
.attr（“填充”、“千”）
.文本（“温度，ºF”）；
var city=g.selectAll（“.city”）
.数据（城市）
.enter（）.append（“g”）
.attr（“类别”、“城市”）；
city.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{返回行（d.values）；}）
.style（“笔划”，函数（d）{返回z（d.id）；}）；
城市。附加（“文本”）
.datum（函数（d）{return{id:d.id，value:d.values[d.values.length-1]}；}）
.attr（“transform”，函数（d）{return”translate（“+x（d.value.date）+”，“+y（d.value.temperature）+”）；）
.attr（“x”，3）
.attr（“dy”，“0.35em”）
.style（“字体”，“10px无衬线”）
.text（函数（d）{返回d.id；}）；
});
函数类型（d、389;、列）{
d、 日期=解析时间（d.日期）；
对于（var i=1，n=columns.length，c；i

该行函数（此处名为

type

）实际上正在执行以下操作：

function type(d){
    d.date = parseTime(d.date);
    d["New Your"] = +d["New Your"];
    d["San Francisco"] = +d["San Francisco"];
    d["Austin"] = +d["Austin"];
    return d;
}

因此，它基本上解析

date

属性，并将所有其他属性强制为数字，正如您正确猜测的那样

它还能做什么

没什么，就是那个

为什么有必要

即使在CSV或TSV中，值是数字，

d3.CSV

和

d3.TSV

用字符串而不是数字填充对象。它们需要转换成数字

关于

日期

很明显，它们需要被解析

解释

d3.csv

和

d3.tsv

接受行转换函数。该函数有三个定义的参数：

如果指定了行转换函数，则为每行调用指定的函数，并传递一个表示当前行（d）、第一个非标题行从零开始的索引（i）以及列名数组的对象

也就是说，在

类型中

函数：

• d

  是表示每一行的整个对象

• \

  是该对象的索引，并且

• 列

  是标题行

在您的情况下，这是

列

：

["date", "New York", "San Francisco", "Austin"]

现在，让我们分析一下

for…

循环

变量

i

从1开始（避免

date

），到3结束。对于每个循环，它都会得到一个属性

d[c = columns[i]]

。。。并将其值（字符串）强制为数字：

columns[i]] = +d[c];

因此，例如，在第一个循环中，当

i=1

时，会发生以下情况：

d[c = "New York"] = +d[c];

所有其他属性也是如此。然后，对于下一行（对象），for..再次循环，依此类推，直到数据数组结束

以下是仅包含三行的演示：

var parseTime=d3.timeParse（“%Y%m%d”）；
var data=d3.csvParse（d3.select（“#csv”）.text（），type）；
函数类型（d、389;、列）{
d、 日期=解析时间（d.日期）；
对于（变量i=1，n=columns.length，c；i

pre{
显示：无；
}

日期，纽约，旧金山，奥斯丁
20111001,63.4,62.7,72.2
20111002,58.0,59.9,67.7

该行函数（此处命名为

类型

）实际上正在执行以下操作：

function type(d){
    d.date = parseTime(d.date);
    d["New Your"] = +d["New Your"];
    d["San Francisco"] = +d["San Francisco"];
    d["Austin"] = +d["Austin"];
    return d;
}

因此，它基本上解析

date

属性，并将所有其他属性强制为数字，正如您正确猜测的那样

它还能做什么

没什么，就是那个

为什么有必要

即使在CSV或TSV中，值是数字，

d3.CSV

和

d3.TSV

用字符串而不是数字填充对象。它们需要转换成数字

关于

日期

很明显，它们需要被解析

解释

d3.csv

和

d3.tsv