Question

我有一个简单的javascript语法问题。我在下面有此链接，它具有一个使用d3.js渲染条形图的代码段。

https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb?p=preview

我不明白的是..

在script.js文件中，有一条语句

 data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.value = +d.value;
});

，如果您只是删除像这样的加号d.value，

  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.value = d.value;
});

如您所见，y轴上的刻度值发生了变化。.据我所知，在值之前加+表示将任何值转换为数字类型。

如果您查看bar-data.csv文件中的数据，则所有值都有数字，所以我认为无论删除+还是没有真正的改变...？

Answer 1

“ ...，如果您查看bar-data.csv文件中的数据，则所有值都带有数字” ...不，实际上，文件加载后它们不是数字/ parsed：它们是字符串。

发生的情况是使用d3.csv的{{1}}将所有字段作为字符串加载。您可以在API中看到它：

如果未指定行转换功能，则字段值为字符串。为了安全起见，不会自动转换为数字，日期或其他类型。（强调我的）

我们可以很容易地证明这一点。假设我们有这个CSV，以数字作为值：

dsv.parse

由于堆栈代码段不允许我们保存CSV文件，因此我将在此处使用foo,bar 17,34 42,12而不是d3.csvParse，但是结果是一样的。看看控制台：

d3.csv

var csv = `foo,bar
17,34
42,12`;

var data = d3.csvParse(csv);

data.forEach(function(d) {
  for (key in d) {
    console.log(d[key] + ": " + typeof d[key])
  }
})

现在，我们使用一元加号仅转换<script src="https://d3js.org/d3.v5.min.js"></script>列中的值：

foo

var csv = `foo,bar
17,34
42,12`;

var data = d3.csvParse(csv, row);

data.forEach(function(d) {
  for (key in d) {
    console.log(d[key] + ": " + typeof d[key])
  }
})

function row(d) {
  d.foo = +d.foo;
  return d;
}

PS：仅说明一下删除了一进制加号后的情况：CSV中的较高数字是478，用于轴的域。但是，除去一元加号后，较高的值将变为“ 53”，它作为字符串大于“ 478”：

<script src="https://d3js.org/d3.v5.min.js"></script>

加号在这里有什么用？

1 个答案: