d3 d => vs function（d）

Question

我正在通过此发布尝试使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行结果的情况下考虑使用？

Answer 1

粗箭头与正常功能有两个区别：

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

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