时间戳

首页 > 解决方案 > d3 d => vs 函数（d）

javascript - d3 d => vs 函数（d）

问题描述

我正在通过这篇文章试图让 d3 图表变得生动。还阅读其他帖子，以便从整个社区获得意见...... https://medium.com/@vaibhavkumar_19430/how-to-create-a-grouped-bar-chart-in-d3-js-232c54f85894

我看到使用了 2 种不同的语法。

第一个用于下面的 x 属性。我相信这被称为“胖箭头”。第二个是内联函数，用于 Y 属性。

model_name.selectAll(".bar.field1")
  .data(d => [d])
  .enter()
  .append("rect")
  .attr("class", "bar field1")
.style("fill","blue")
  .attr("x", d => xScale1('field1'))
  .attr("y", function(d) { return yScale(d.field1) })

这些是等价的吗？

只有当可以用单行产生所需的结果时，才能使用粗箭头吗？

你能用这样的东西吗（我不能让它工作）

  .attr("x", d =>{ stmt1;  stmt2;  etc;  return d*5; }

胖箭头是否提供了一些很大的好处，因此应该在 1 行结果案例中考虑它？

标签： javascriptangulartypescriptd3.js

解决方案

胖箭头与正常功能有两个不同：

  1. 如果你在单行函数中返回一个值，你可以省略“return”和大括号，使用隐式返回。喜欢val => val.name是一样的(val) => { return val.name; }。
  2. 关键字的使用发生了this变化。在胖箭头函数中，它与外部作用域绑定到相同的上下文。

您发布的多语句胖箭头函数示例应该可以正常工作，假设缺少的括号只是一个错字。不过，我对 d3 了解不多。xScale1 返回一个数字吗？如果没有，那可能就是你的函数不起作用的原因，因为它返回一个数字。

推荐阅读